css3动画
1、2d动画
translate() :平移。根据左(X轴)和顶部(Y轴)位置给定的参数,从当前位置移动。
rotate() :旋转。在一个给定度数顺时针旋转的元素,负值是允许的,这样的元素逆时针旋转。(如rotate值(30deg)元素顺时针旋转30度。)
scale() :伸缩。该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数。如(scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。)
skew() : 变形。包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
2、过度动画
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果(过渡 过渡的是元素的属性值)。要实现这一点,必须规定两项内容:
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
例:
b{
width: 100px;
height: 100px;
background: red;
margin-left: 0;
transition-delay /动画的延迟/
transition-delay:1s;
transition-duration /动画的执行时间/
transition-duration: 1s;
transition-timing-function动画的执行方式 linear 匀速 ease-in 慢开 ease-in-out 慢开慢关*!/
transition-timing-function: linear;
transition-property 过渡什么属性 margin-left 如果要过渡多个属性 分开 all 过渡所有属性*!/
transition-property:margin-left;*/
transition: margin-left 1s 1s linear;
}
.b:hover{
margin-left: 50px;
}
3、帧动画
动画名称
animation-name:animate ;
动画执行时间
animation-duration: 5s;
动画执行方式*
animation-timing-function: linear;
动画的延迟
animation-delay: 1s;
动画播放多少次 infinite循环播放
animation-iteration-count: 1;
播放方式 alternate 奇偶播放
animation-direction: alternate;
动画是否播放 paused
animation-play-state: running;
animation:animate(名字) 1s() 2s linear infinite alternate;
动画停止到完成位置
animation-fill-mode: forwards
4、css3 3d转换
rotateX()
rotateY()
通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
div
{
transform: rotatex(-75deg);
transform-style: preserve-3d;
}
通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
div
{
transform: rotatey(-75deg);
transform-style: preserve-3d;
}