复习（css过渡与动画）

过渡属性

transition   

用于在一个属性中设置四个过渡属性。
代码：

div{
    width: 100px;
    height: 100px;
    background: red;
   transition: width 2s , height 2s
}
div:hover{
    width: 300px;
    height: 300px;

}

效果：

当鼠标移上去的时候这个正方形的宽度会增加 300 像素

transform

实现四个功能：旋转，倾斜，缩放，位移
代码：
div{
width: 100px;
height: 100px;
background: red;
transition: width 2s , height 2s ,transform 2s;
}
div:hover{
width: 300px;
height: 300px;
transform: rotate(180deg);
}

translate(x y)位移

rotate()旋转 transform：rotate（角度deg）负 右 正 左
skew()倾斜 transform：skewx（deg）或skewy（deg）;;
scale()缩放 transform：scale(倍数); （大于1放大小于1缩小）

 transition-property   

规定应用过渡的 CSS 属性的名称。

transition-duration

定义过渡效果花费的时间。默认是 0。

代码：
div{
width: 100px;
height: 100px;
background: red;
transition-duration: 4s;
}
div:hover{
height: 300px;

}

transition-timing-function

规定过渡效果的时间曲线。默认是 “ease”。

代码：
div{
width: 100px;
height: 100px;
background: red;
transition-timing-function: linear;

}
div:hover{
height: 300px;

}
transition-delay

规定过渡效果何时开始。默认是 0。

div{
width: 100px;
height: 100px;
background: red;
transition-delay: 2s;

}
div:hover{
height: 300px;

}

css动画属性

@keyframes   

规定动画。

animation

代码：
div{
width:100px;
height:100px;
background:red;
animation:one 5s; 这句的意思：动画执行时间
}
@keyframes one
{
from{background: red;}
to{background: yellow;}

}
注意事项：
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

animation-duration

规定动画完成一个周期所花费的秒或毫秒。默认是 0。
代码：
div{
width:100px;
height:100px;
background:red;
animation: one;
animation-duration: 2s;
}

@keyframes one
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}

}

animation-timing-function

规定动画的速度曲线。默认是 “ease”。

animation-delay

规定动画何时开始。默认是 0。
代码：
div{
width:100px;
height:100px;
background:red;
animation: one;
animation-duration: 2s;
animation-delay: 2s;
}

@keyframes one
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}

}

animation-iteration-count

动画无限次播放：infinite

规定动画被播放的次数。默认是 1。
代码：
div{
width:100px;
height:100px;
background:red;
animation: one;
animation-duration: 2s;
animation-iteration-count: 3;
}

@keyframes one
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}

}

animation-direction

动画正常播放 ：normal
动画轮流反向播放： alternate

规定动画是否在下一周期逆向地播放。默认是 “normal”。

animation-play-state

暂停是 ：paused
运行是 ：running

规定动画是否正在运行或暂停。默认是 “running”。

代码：
div {
width:100px;
height:100px;
background:red;
position:relative;
animation:one;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:1s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

}

@keyframes one
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}