笔记：CSS3动画

最新推荐文章于 2023-12-23 09:31:08 发布

禅解缠

最新推荐文章于 2023-12-23 09:31:08 发布

阅读量240

点赞数

分类专栏：学习笔记文章标签： CSS3 动画animation keyframes will-change

本文链接：https://blog.csdn.net/weixin_44321876/article/details/88564214

版权

学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

动画animation

anima----灵魂
animate-----赋予生命
动画可以定义为使用绘画的手法，创造生命运动的艺术

视觉暂留原理
人类具有视觉暂留的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失
动画原理
通过把人物的表情，动作，变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果，视觉欺骗

安卓设备在使用动画时，要加上前缀（-webkit-）
1.animation-name
解释：检索或设置对象所应用的动画名称
语法：animation-name：keyframename / none;
keyframename：指定要邦定到选择器的关键帧的名称
none：指定没有动画，可用于覆盖从级联的动画
2.animation-duration
解释：检索或设置对象动画的持续时间
语法：animation-duration：time;
time：指定动画播放完成花费的时间，默认值为0，意指没有动画效果
3.animation-timing-function
解释：检索或设置对象中过渡的动画类型
语法：transition-timing-function:ease / linear / ease-in / ease-out / ease-in-out / step-start / step-end / steps(integer,[start / end]?) / cubic-bezier(number,number,number,number);
注：只能使用一个属性
参数说明：
linear：线性过渡，等同于贝塞尔曲线（0.0，0.0，1.0，1.0），匀速运动

ease：平滑过渡，等同于贝塞尔曲线（0.25，0.1，0.25，1.0）
ease-in：由慢到快，等同于贝塞尔曲线（0.42，0，1.0，1.0）
ease-out：由快到慢，等同于贝塞尔曲线（0，0，0.58，1.0）
ease-in-out ：由慢到快再到慢，等同于贝塞尔曲线（0.42，0，0.58，1.0）

step-start：等同于steps(1，start)
step-end：等同于steps(1，end)
steps(integer,[start / end]?)：接受两个参数的步进函数
第一个参数：必须为正整数，指定函数的步数
第二个参数：取值可以是 start 或 end ，指定每一步的值发生变化的时间点，参数为可选，默认值为 end

cubic-bezier(number,number,number,number)：特定的贝塞尔曲线类型，四个数值需在0~1范围内
4.animation-delay
解释：检索或设置对象动画的延迟时间
语法：animation-delay：time;
可选，定义动画开始前等待的时间，以秒或毫秒为单位，默认值为0，允许负值，如：-2，会立既执行动画，但会跳过2秒进入动画
5.animation-iteration-count
解释：检索或设置对象动画的循环次数
语法：animation-iteration-count：infinite / number;
说明：number为数字，其默认值为 1，infinite为无限次数循环
6.animation-direction
解释：检索或设置对象动画在循环中是否反向运动
语法：animation-direction：normal / reverse / alternate / alternate-reverse / initial / inherit;
normal：正常方向
reverse：反方向运动
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反方向运行再正方向运行，并持续交替运行
注：后面两个要在设置循环次数大于2次的情况下才有效果
7.animation-fill-mode
解释：规定当动画不播放时（动画完成或动画有延迟未开始播放时），要应用到元素的样式
语法：animation-fill-mode：none / forwards / backwards / both / initial / inherit;
none：默认值，不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始时的状态
8.animation-play-state
解释：指定动画是否正在运行或已暂停
语法：animation-play-state：paused / running;
paused：指定暂停动画
running：默认值，指定正在运行的动画
9animation 复合属性
解释：检索或设置对象所应用的动画特效
语法：animation：name duration timing-function delay iteration-count direction fill-mode play-state;
注：name 和 duration 为两个必须参数，当只有一个时间时，自动默认为是duration的参数，name必须为第一个参数，其它顺序不是特别重要

关键字@keyframes

解释：关键帧，可以指定任何顺序排列来决定animation动画变化的关键位置
说明：使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个，在动画过程中可以通过@keyframes规则多次更改CSS样式的设定
语法：

@keyframes animationname{
			  keyframes-selector{
			  		css-styles;
			  		}
		  	}

注：三个参数都是必写项
animationname：定义 animation的名称
keyframes-selector：动画持续时间的百分比，0~100%、from代表0%，to代表100%
css-styles：一个或多个合法的CSS样式属性

will-change

解释：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置
语法：will-change：auto / scroll-position / contents / < custom-ident > / < animateable-feature >;
auto：表示没有特定的意图，适用于它通常所做的任何启发式和优化
scroll-position：表示将要改变元素的滚动位置
contents：表示将要改变元素的内容
< custom-ident >：明确指定将要改变的属性与给定的名称
< animateable-feature >：可动画的一些特征值，比如：left，top，margin等
兼容性：IE13+，Firefox47+，Chrome49+，Safari 9.1+，Opera39+，IOS9.3+，Android52+