面试题:CSS 怎样实现动画?

面试题:CSS 怎样实现动画?

(有哪些)CSS 主要通过**过渡(transitions)和关键帧(keyframes)**实现动画。


(过渡是什么)过渡指的是元素**从一种状态(样式)转变为另一种状态(样式)**的动画效果。过渡经常配合 :hover 或 JS 事件使用(触发元素变为另一种状态)。

(过渡怎么实现)通过设置元素 transition 样式,从而设置元素的过渡效果当元素某些样式变化后,这种变化会根据预先定义的 transition 样式中规定的过渡效果进行变换(核心!!!)。

(过渡的语法简单说明)

.element{transition: property duration timing-function delay;/* 过渡属性:none(默认)、all(最常用)、特定属性名(多个属性名以 , 分割) *//* 持续时间:<number>s/ms(接收两种单位,默认值为 0)(如果给多个属性指定,则多个时间以 , 分割) *//* 过渡速度曲线: ....... *//* 过渡开始前的延迟时间:<number>s/ms(接收两种单位,默认值为 0) */
}

(过渡的注意事项)并不是所有属性都可以过渡,必须值为数字,或可以转换为数字的属性才支持过渡。


(关键帧动画是什么)关键帧动画指的是通过设置多个关键帧来实现的一种动画效果。与过渡效果不同,关键帧动画通常不需要什么触发条件。并且关键帧动画在细节的把握上更加细腻。

(关键帧动画怎么实现)要使用关键帧动画,首先需要使用 @keyframes 动画名 {} 定义一个动画,由一系列关键帧组成。然后在某些元素身上使用 animation 样式来应用动画

(定义关键帧动画语法简单说明)

  • 只设置开始结束关键帧

    @keyframes 动画名 {from { // 开始时刻的关键帧}to { // 结束时刻的关键帧}
    }
    
  • 设置百分比关键帧(可以设置任意数量的关键帧)

    @keyframes 动画名 {0% { // 开始时刻的关键帧}20% {}xx%{ // 可以设置任意时刻的关键帧}80%{}100% { // 结束时刻的关键帧}
    }
    

(使用关键帧动画语法简单说明)

.element{animation: animation-name duration timing-function delay iteration-count direction fill-mode/* 动画名(见动画定义) 持续时间(同过渡) 动画速度曲线(同过渡) 动画开始前延迟时间(同过渡) 动画播放次数(<number>, infinite 表示无限次) 动画方向(normal 开始到结束, reverse 结束到开始, alternate 交替, alternat-reverse 反方向交替) 动画结束后的状态(forwards 动画结束时状态, backwards 动画开始时状态) */animation-play-status: running; // 动画播放状态,running 默认值,播放;paused 暂停
}

REFERENCES

https://github.com/Nasir1423/front-end-notes/blob/main/1-HTML%2BCSS/HTML%2BCSS.md#%E8%BF%87%E6%B8%A1day11181p882

https://github.com/Nasir1423/front-end-notes/blob/main/1-HTML%2BCSS/HTML%2BCSS.md#%E5%8A%A8%E7%94%BB

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/20313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ROS2 自定义话题接口

ROS2 自定义话题接口 ros2 pkg create village_interface在src/village_interface 下构建msg文件夹 src/village_interface/msg 下新建一个Novel.msg Novel.msg 开头第一个字母一定要大写 写入 Novel.msg #原始数据类型 string content# 调用sensor_msgs/Image sensor_msgs/I…

每日一题——Python实现PAT乙级1020 月饼(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 专业点评&#xff1a; 时间复杂度分析&#xff1a; 空间复杂度分析&#…

【一步一步了解Java系列】:子类继承以及代码块的初始化

看到这句话的时候证明&#xff1a;此刻你我都在努力 加油陌生人 个人主页&#xff1a;Gu Gu Study专栏&#xff1a;一步一步了解Java 喜欢的一句话&#xff1a; 常常会回顾努力的自己&#xff0c;所以要为自己的努力留下足迹 喜欢的话可以点个赞谢谢了。 作者&#xff1a;小闭 …

分享一个在linux中运行通义千问的方法

分享一个在linux中和通义千问交互的方法 效果展示: 整体步骤 分享一个在linux中和通义千问交互的方法效果展示:一、在阿里云appflow控制台创建连接流1、通过以下地址,在灵积平台创建个API-KEY,用于通义千问的连接凭证2、点击连接流-创建连接流3、第一步选择webhook4.第二步…

nginx和proxy_protocol协议

目录 1. 引言2. HTTP server的配置3. Stream server的配置3.1 作为proxy_protocol的前端服务器3.2 作为proxy_protocol的后端服务器1. 引言 proxy_protocol 是haproxy开发的一种用于在代理服务器和后端服务器之间传递客户端连接信息的协议。使用 proxy_protocol 的主要优势是能…

Linux上安装和使用Docker容器的指南

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法&#xff0c;大数据&#xff0c;深度学习 &#x1f492; 公众号…

【ai】livekit服务本地开发模式1:example app信令交互详细流程

文档要安装git lfs 下载当前最新版本1.6.1windows版本:启动dev模式 服务器启动 (.venv) PS D:\XTRANS\pythonProject\LIVEKIT> cd .

python列表基本运算

列表基本运算 成员运算符 in 老师你在上课喊人回答问题的时候&#xff0c;就犯了难。想点的人名字已经脱口而出了&#xff0c;但发现这位同学没来。 可不&#xff0c;今天的课就来了 8 个人&#xff1a; students [林黛玉, 薛宝钗, 贾元春, 妙玉, 贾惜春, 王熙凤, 秦可卿,…

云WAF的负载均衡和流量分发功能

云WAF&#xff08;Web Application Firewall&#xff09;是一种专门设计来保护Web应用免受网络攻击的网络安全设备。它通过监控、过滤和阻止HTTP流量中的恶意攻击&#xff0c;确保Web应用的安全和可用性。云WAF的负载均衡和流量分发功能是其重要的特性之一&#xff0c;这些功能…

VS2022+QT5.15.2+MySQL8.4大集合

网上的教程都建议用Qt5&#xff0c;不要用6&#xff0c;不死心的尝试了整整一天失败了&#xff0c;乖乖用回5&#xff0c;qt5需要编译一下生成mysql的动态和静态库 1. mysql8.4安装 下载社区开发版&#xff0c;注意要64位 https://dev.mysql.com/downloads/mysql/ 配置一下数…

安卓SystemServer进程详解

目录 一、概述二、源码分析2.1 SystemServer fork流程分析2.1.1 [ZygoteInit.java] main()2.1.2 [ZygoteInit.java] forkSystemServer()2.1.3 [Zygote.java] forkSystemServer()2.1.4 [com_android_internal_os_Zygote.cpp]2.1.5 [com_android_internal_os_Zygote.cpp] ForkCom…

CANDela studio基础使用

ECU Information 可以修改ECU的名称 里面有个Supported Interfaces&#xff0c;可以在CDDT里面选择支持的通讯接口 可以在tools下面新建internface&#xff0c;也可以从其他CDDT文件里面复制过来&#xff0c;复制的时候注意要另外将里面的参数再复制一次。 也可以在这里点击新…

HTML与Python语法:深度探索与实用指南

HTML与Python语法&#xff1a;深度探索与实用指南 在编程领域&#xff0c;HTML和Python是两个截然不同的语言&#xff0c;各自在Web开发和数据分析等领域发挥着关键作用。然而&#xff0c;当这两者结合时&#xff0c;可以产生强大的效果。本文将分别从四个方面、五个方面、六个…

JavaScript基础知识2(常量、数据类型、类型转换、算术运算符优先级)

JavaScript基础知识2&#xff08;常量、数据类型、类型转换、算术运算符优先级&#xff09; 常量数据类型数值类型字符串类型模板字符串基本用法你的例子改写成模板字符串详细解释完整示例&#xff08;使用模板字符串&#xff09; 布尔类型undefined获取数据类型使用 typeof返回…

倪师哲学。能让我好,我就接受

还有有些人更搞笑的是&#xff0c;把自己的行为啊&#xff0c;建立在别人的基础之上&#xff0c;如果那个人么样对我&#xff0c;我肯定能怎么样对这个人。 生而为人呐&#xff0c;你是一个独立的人&#xff0c;不要去总是拿着各种各样的前提&#xff0c;来限制了自己个人的成长…

Python 时间戳转时间

一、 10 位 时间戳 &#xff0c;秒级 转换为时间 方式一&#xff1a; import timetimeStamp 1717149862 timeArray time.localtime(timeStamp) timeStr time.strftime("%Y-%m-%d %H:%M:%S", timeArray) print(timeStr) 输出: 2024-05-31 18:04:22方式二&#xf…

打造你的专属Vue组件:超实用“手机号、邮箱、身份证号加密显示组件“实战

随着Web应用程序的发展&#xff0c;我们经常需要处理用户敏感信息&#xff0c;如手机号码和身份证号码。为了保护用户隐私&#xff0c;我们需要在前端对这些信息进行加密处理&#xff0c;以避免直接暴露在页面上。在这篇博客中&#xff0c;我们将介绍如何使用Vue 3.0单文件组件…

CATO原理中的数学与魔术(十一)——Parity Principle及其应用二:集合的可视化...

早点关注我&#xff0c;精彩不错过&#xff01; 上篇文章中&#xff0c;我们已经进入了CATO原理魔术介绍的深水区&#xff0c;是第3个系列Parity Principle中集合性质的章节&#xff0c;聊到了关于张数和求和集合性质&#xff0c;并对性质之间的偏序关系&#xff0c;性质之间的…

USB - Linux Drivers介绍

在 Linux 中&#xff0c;USB 驱动程序子系统负责管理 USB 设备与操作系统之间的通信。下面概述了 Linux 中 USB 驱动程序子系统的组件和功能&#xff1a; USB 核心&#xff1a; USB 内核是 USB 驱动程序子系统的核心&#xff0c;它为 USB 通信提供了基本的基础设施。它负责设备…

three.js官方案例(animation / keyframes)webgl_animation_keyframes.html学习

目录 ​编辑 1 PMREMenerator 1.1 构造函数 1.2 fromScene方法 2 AnimationMixer 3 animal1.html全部 4 animal1.js全部 1 PMREMenerator 此类生成预过滤的 Mipmapped 辐射环境贴图 &#xff08;PMREM&#xff09; 来自 cubeMap 环境纹理。这允许不同的级别 的模糊&…