文章目录[隐藏]
什么是CSS动画？
能够使元素逐渐从一种样式变为另一种样式。可以随意更改任意数量的 CSS 属性。
animation
语法
animation: name duration timing-function delay iteration-count direction fill-mode play-state;1、animation-name
用来为 @keyframes 动画指定名称。
animation-name: donghua2、animation-duration
用来定义动画播放完成花费的时间需要多少秒或者毫秒。
animation-duration: time3、animation-timing-function
用来指定动画的完成过程是以何种速度曲线来实现的。通俗的讲就是匀速、加速或者匀速在加速。
与其他属性不同，我们除了可以使用CSS预置的属性值之外，还可以通过 三次贝尔曲线 来自定义值。
animation-timing-function: value
@value
liener // 匀速进行
ease // 慢速开始，加速，减速结束
ease-in // 慢速开始
ease-out // 慢速结束
ease-in-out // 慢速开始和结束
cubic-bezier(n,n,n,n) // 自定义值 n的取值范围 0 -
除了上面属性之外还有个非常实用的函数steps(number，[end | start])
用于实现逐帧动画，其中第一个参数number用于设置分几步完成，必须为整数。第二个参数 可选start/end默认end。TA决定从一帧到另一帧的中间间隔是用开始帧还是结束帧来进行填充。选start就是表示第一帧立即执行，从第二帧开始然后第一帧结束。end则表示正常开始结束。
steps(N, start)将动画分为N段，动画在每一段的起点发生阶跃(即图中的空心圆 → 实心圆),动画结束时停留在了第 N 帧
steps(N, end)将动画分为N段，动画在每一段的终点发生阶跃(即图中的空心圆 → 实心圆),动画结束时第 N 帧已经被跳过(即图中的空心圆 → 实心圆)，停留在了 N+1 帧。
4、animation-delay
用来定义动画什么时候开始，可以为负数，负数的时候表示跳过而进入动画,单位是秒或者毫秒。
animation-delay: time5、animation-iteration-count
用来定义动画播放的次数，可以设置整数或者infinite（无限次）
animation-iteration-count: value6、animation-direction
定义动画的播放循序。
animation-direction: value
@value
normal // 正常
reverse // 反向播放
alternate // 奇数正向播放，偶数反向播放
alternate-reverse // 奇数反向播放，偶数正向播放
7、animation-fill-mode
用来设置动画结束后所要应用的动作or属性值
animation-fill-mode: value
@value
none // 无
forwards // 动画结束后保持最后一个属性值
backwards // 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值
both // 向前和向后填充模式都被应用8、animation-play-state
指定动画是运行还是暂停
animation-play-state: paused|running;@keyframes
用来创建一个动画的具体实现过程
@keyframes donghua
{
from {
width: 100px;
}
to {
width: 200px;
}
}Transition
谈及CSS动画属性，我们不得不说下transition这个属性，因为TA基本是和animation配对出现。
Transition CSS的过渡属性。
语法
transition: property duration timing-function delay;1、transition-property
设置应用过渡效果的CSS属性名称。默认值是all，可以单独指定。
transition-property: none | all | 具体CSS属性值名;2、transition-duration
用来设置完成过渡效果需要花费的时间（秒/毫秒）
transition-duration: value3、transition-timing-function
用来设置动画过渡效果的速度曲线。
transition-timing-function: value
@value
linear // 匀速-结束
ease // 慢速-加速-减速-结束
ease-in // 慢速开始-结束
ease-out // 开始-慢速结束
ease-in-out // 慢速开始-慢速结束
cubic-bezier(n,n,n,n); // 自定义值，n 0-1之间4、transition-delay
设置过渡效果何时开始。单位是（秒/毫秒）
transition-delay: timeTransform
用来设置元素的 2D => 3D 转换。实现元素的旋转、缩放、移动或者改变形状。
1、transform: matrix(n,n,n,n,n,n)
用来定义2D转换
2、transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
用来定义3D转换
3、transform: translate
用来实现元素在x,y轴上平移效果。
4、transform: translate3d
用来实现元素在x,y,z轴上平移效果。
5、transform: scale
用来实现2D下的缩放。
6、transform: scale3d
用来实现3D下的缩放。
7、transform: rotate
用来实现2D下的旋转。
8、transform: rotate3d
用来实现3D下的旋转。
9、transform: skew
用来实现2d方向的倾斜
10、transform: perspective
将该元素的子元素设置透视效果，搭配perspective-origin使用。
本篇主要将动画涉及到的三个基本属性以及属性值回顾了一遍，下篇文章将重点对每个属性值的效果进行实际应用。
微信扫描下方的二维码阅读本文
评论已关闭