CSS动画
CSS动画是一种浏览器上的动态表现形式。
简介
大约在08年前后,市面上的主流浏览器以增强用户体验、方便代码设计为目的,开始增加一些不需要依赖JavaScript的特殊动画效果的实现。时至今日,这些内容已经被默认为CSS3标准的一部分,是一个浏览器所必须要支持的,一般认为它包括:变形(Transforms)、过渡(Transitions)、动画(Animation)三部分。
变形(Transforms)
变形(Transforms)分为2D变形和3D变形两种,本质上是使用矩阵向量对元素计算缩放、偏移、倾斜、旋转等变形,所以2D变形是3阶矩阵,具有6个参数、而3D变形则是4阶矩阵,具有16个参数。
Matrix
matrix(a,b,c,d,e,f)方法是一个矩阵,是其他所有的2D变形的根本方法。matrix不需要单位。
matrix3d(……)是3D矩阵,很麻烦。
矩阵 | ||||||
---|---|---|---|---|---|---|
a | c | e | · | x | = | ax+cy+e |
b | d | f | y | bx+dy+f | ||
0 | 0 | 1 | 1 | 0+0+1 |
表中x、y表示换换前坐标。
例子:
<!--向左、下分别移动10像素的距离。--> <div style="display:inline-block;background-color:#000;width:100px;height:100px;"> <div style="background-color:#fff;width:10px;height:10px;transform:translate(10px,10px)"> </div> </div> <!--换成矩阵的书写方式。--> <div style="display:inline-block;background-color:#000;width:100px;height:100px;"> <div style="background-color:#fff;width:10px;height:10px;transform:matrix(1,0,0,1,10,10)"> </div> </div>
Translate
Translate是需要单位的。
translate(x,y)是2D坐标转换,x表示横向偏移,y表示纵向偏移。
translate3d(x,y,z)是3D坐标转换,
translateX(x)是X轴的坐标转换,translateY(y)是Y轴的坐标转换。
translateZ(z)是Z轴的坐标转换,是3D坐标转换。
公式:translate(x,y)=matrix(1,0,0,1,x,y)
Scale
scale(x,y)是定义一个2D缩放。
scale(x,y)是2D坐标缩放,x表示横向缩放,y表示纵向缩放。
scaleX(x)是X轴的缩放,scaleY(y)是Y轴的缩放。
scaleZ(z)是Z轴的缩放,是3D缩放转换。
公式:scale(x,y)=matrix(x,0,0,y,0,0)
Rotate
rotate(angle)是定义一个2D旋转,angle表示一个角度,单位是deg。
rotate3d(x,y,z,angle)是定义一个3D旋转。
rotateX(angle)定义沿着X轴的3D旋转,rotateY(angle)定义沿着Y轴的3D旋转,rotateZ(angle)定义沿着Z轴的3D旋转。
公式:rotate(θ)=matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
注意:第三个值前面带了一个负号,这是奇偶性问题,这里不做展开。
Skew
skew(x,y)是定义一个2D倾斜转换,x表示X轴的倾斜转换,y表示Y轴的倾斜转换。
skew3d(x,y,z)是一个3D倾斜转换。
skewX(x)是X轴的倾斜转换,skewY(y)是Y轴的倾斜转换。
公式:skew(x,y)=matrix(1,tan y,tan x,1,0,0)
Perspective
perspective(n)定义3D透视。
例子
关于3D转换的小例子:
过渡(Transitions)
默认的简写方法是:transition: transition-property transition-duration transition-timing-function Transition-delay
Property
transition-property定义需要进行过渡效果属性名称,这个属性一定要是可以连续变化的,比如:宽高、字号、颜色等。
可以声明多个属性同时开始过渡,以逗号隔开即可,all表示这个元素的所有属性都将进行过渡。
Duration
transition-duration定义过渡效果花费的时间,默认是0,单位是ms,0意味着不会有任何变化。
Timing-function
transition-timing-function规定过渡效果的时间曲线,默认是"ease"。
它可以是以下参数或方法。
- linear:匀速变化,等同于cubic-bezier(0,0,1,1)。
- ease:先慢后快再慢。等同于cubic-bezier(0.25,0.1,0.25,1)。
- ease-in:缓慢加速,等同于cubic-bezier(0.42,0,1,1)。
- ease-out:缓慢减速,等同于cubic-bezier(0,0,0.58,1)。
- ease-in-out:缓慢加速缓慢减速,等同于cubic-bezier(0.42,0,0.58,1)。
- cubic-bezier(n,n,n,n)声明一个方法,规定一个贝塞尔曲线函数定义时间曲线,各个n的有效值是0到1[1]。
Transition-delay
transition-delay定义过渡效果的延迟时间,单位是ms,默认是0,0意味着不延迟,立即开始。
例子
动画(Animation)
参考:{{M-animation}},通过调整旋转的角度以及动画播放速度,可以得到不同的效果。(示例播放次数的参数为无限循环:animation-iteration-count:infinite;)
注意:鼠标悬停以此打断Mea右手(的动画播放)。
{{M-animation}}<div style="display:inline-blockposition:relative;width:500px;height:666px;"> <div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div> <div class="moe-ani-count-infinite ani-time-1 ani-rotate30-re" style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);"> {{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}} </div> </div> <div class="moe-animation" style="display:inline-block;position:relative;width:500px;height:666px;"> <div style="position:absolute;z-index:3;left:0;top:0;">{{image|img=神楽めあ2.jpg|width=500|height=666|resize=500}}</div> <div class="ani-hover moe-ani-count-infinite ani-time-01 ani-rotate360" style="position:absolute;z-index:5;left:185px;top:175px;transform-origin:30% 90%;transform:rotate(-30deg);"> {{image|img=神楽めあ2.jpg|width=50|height=80|resize=500|x=185|y=175}} </div> </div>
animation
所有动画属性的简写属性,除了 animation-play-state 属性。
@keyframes
@keyframes规定动画关键帧,它只能写在样式表里,没办法写在内联样式中。
from等于0%,to等于100%,中途也可以使用百分比数值增加更多的关键帧,具体时间还是duration定义的总时长。
/* 比如将样式的颜色从red变为black */ @keyframes seecolor1 { from {color:red;} to {color:black;} } @keyframes seecolor2 { 0% {color:red;} 50% {color:blue} 100% {color:black;} }
name
animation-name:规定由@keyframes定义的动画的名称,具有这个属性的元素将会执行@keyframes规定的动画。
duration
animation-duration定义动画效果完成一个周期所花费的时间,默认是0,单位是ms。
timing-function
animation-timing-function规定动画的速度曲线。默认是 "ease",同过渡一样。
delay
animation-delay定义动画效果的延迟时间,单位是ms,默认是0,0意味着不延迟,立即开始。
iteration-count
animation-iteration-count定义动画播放的次数,默认是1,infinite将会无限次循环播放。
direction
animation-direction定义动画完成一次周期后,在下一周期内是否逆向地播放。默认是normal,alternate将会正向逆向交替播放。
play-state
animation-play-state规定动画播放状态,默认是播放中running,paused是暂停状态。通过js可以对元素的这一属性进行更改,可以播放或暂停。
fill-mode
animation-fill-mode规定元素在动画播放之外的状态。
- none:不改变默认行为。
- forwards:动画完成后,保持在最后一个关键帧中定义的样式。
- backwards:动画开始前,animation-delay中,应用在第一个关键帧中定义的样式。
- both:同时具有两种属性。
例子
红叶