CSS3过渡

CSS3过渡

特点： 
（1）本质上是一帧动画，一帧结束后，就没有然后了….. 
（2）过渡的效果的实现，必须要通过用户的行为，可能触发 行为：hover，focus，click，JS代码。

1、transition的属性

transition-property:指定元素的过渡属性 
transition-duration: 规定了过渡的时间 
transition-timing-function: 规定以何种方式过渡 
ease：表示的是快速 
ease-in ：表示的是先慢后快 
ease-out：表示的是先快后慢 
linear：线性平缓的变换 
step(num)：规定过渡分几步完成。num只能是正值。 
transition-delay: 规定延迟多少时间进行

ttransition-property: transform;
transition-duration: 1.5s;
transition-timing-function: steps(5);
transition-delay: 1s;
transition: transform 1.5s linear;//简写
 
 
1
2
3
4
5

2、缩写

transition: property duration timing-function delay;

transition: transform 5s ease-in-out 1s;
 
 
1

3、触发过渡

只有当用户触发事件，过渡事件才能进行，比如用户点击、鼠标移入移出等等，这是它的一个局限性。

4、局限性

CSS3动画

1、animation动画属性

animation-name:取值为动画名称; 
animation-duration:规定动画完成所需时间 
animation-timing-function: 规定以什么方式完成动画; 
animation-delay: 规定动画延迟多久执行; 
animation-iteration-count: 规定动画执行的次数（infinite 无限循环） 
animation-direction: 规定动画执行的方向（alternate 规定动画来回执行）; 
animation-play-state: 规定动画的运行与暂停，默认值为running（运行）;paused表示暂停。 
animation-fill-mode: 规定动画开始之前和结束之后发生的操作，默认值为none，另外的两个是forwards表示动画结束后元素保留最后的状态;backwards则与forwards相反。

animation-name: move;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 1s;
animation-direction: alternate;
animation-play-state: running;
animation-iteration-count: infinite;
animation: move 1s linear infinite;//缩写
 
 
1
2
3
4
5
6
7
8

2、@keyframes

规定一个动画，包括动画名称， 
form规定初始状态，to规定动画的末状态

@keyframes move {
 from{
        transform: translate(0);
    }
    to{
        transform: translate(600px,120px);
    }
}
0%也可以表示初始状态，100%也可以表示动画的末状态。
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: scale(0.5);
    }
    60% {
        transform: rotate(50deg);
    }
    100% {
        transform: translate(500);
    }