CSS3——变形与动画

Posted 2020-06-27

一、变形

1、旋转 rotate()

2、扭曲 skew()

3、缩放 scale()

4、位移 translate()

5、矩阵 matrix()

6、原点 transform-origin

二、动画

1、过渡属性 transition-property

2、过渡所需时间 transition-duration

3、过渡函数 transition-function

4、过渡延迟时间 transition-delay

三、Keyframes介绍

@keyframes 关键帧

@Keyframes 动画名称{ } 与animation搭配使用，Chrome和Safari需要前缀 -webkit,Foxfire需要前缀-moz-

@keyframes changecolor{

0%{
background: red;
}
20%{
background:blue;
}
40%{
background:orange;
}
60%{
background:green;
}
80%{
background:yellow;
}
100%{
background: red;
}
}

animation-name:changecolor;

animation-duration:10s;

animation-timing-function:ease;

animation-delay:1s;

animation-iteration-count:infinite;   /*动画重复次数*/

animation-direction:normal|alternate;  /*alternate的作用是动画播放在第偶数次向前播放，第奇数次向反方向播放*/

animation-play-state:running|paused;  /*动画的播放状态*/

animation-fill-mode:none|forwards\backwords|both  /*动画时间外属性*/

属性值	效果
none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards	表示动画在结束后继续应用最后的关键帧的位置
backwards	会在向元素应用动画样式时迅速应用动画的初始帧
both	元素动画同时具有forwards和backwards效果