CSS3学习笔记——动画

CSS3中的动画功能分为Transitions功能和Animations功能；

1.Transitions功能

支持从一个属性在指定时间内平滑过渡到另一个属性值；

transitions功能具有的属性：

1）transition-property：哪种属性平滑过渡；

2）tranition-duration：在多久时间内完成属性的平滑过渡；

3）tranition-timing-function：通过什么方法进行平滑过渡；

4）tranition-delay：指定变换动画特效延迟多久后开始执行；

这四个可以分开一一设置，也可以直接进行属性连写；

transition:property duration timing-function delay;

eg: transition:background-color 1s linear 2s;

还可以同时平滑过渡多个属性值

eg: transition:background-color 1s linear,color 1s linear,width 1s linear;

可以通过改变元素的位置属性值，实现变形处理的transform属性值来让元素实现移动、旋转等动画效果；

img{
        position: absolute;
        top: 70px;
        left: 0;
        transition: left 1s linear, transform 1s linear;
}
div:hover img{
        position: absolute;
        left: 30px;
        transform: rotate(720deg);
}

缺点：

只能指定属性的开始值与终点值，然后在这两个属性值之间实现平滑过渡，不能实现更为复杂的动画效果；

2.Animations功能

支持通过定义多个关键帧以及每个关键帧中元素的属性值的指定来实现更为复杂的动画效果；

1）组成

@keyframes 名字{

开始帧（0%）{属性：值；}

关键帧（任意想变化的百分位置）{属性：值；}

结束帧（100%）{属性：值；}

}

选择器名{

keyframe的名称（animation-name）

动画的执行时长（animation-duration）

动画的实现方法（animation-timing-function）

延迟多少秒后开始执行动画 (animation-delay) (单位：秒或毫秒)

动画执行的次数（animation-iteration-count）也可以执定infinite(无限次)

动画执行的方向（animation-direction）

}

① animation-direction可指定的属性值包括：

normal：初始值（动画执行完毕后返回初始状态） alternate：交替更改动画的执行方向

reverse：反方向执行动画 alternate-reverse：从反方向开始交替更改动画的执行方向

② animation-timing-function可指定的属性值：（指定动画的改变状态的速度）

linear：匀速 ease-in：慢-->曲线加快 ease-out：快-->曲线放慢 ease：慢-->快-->慢 ease-in-out：慢-->快-->慢

③ opacity属性实现页面淡入效果（经常使用）

通过在开始帧与结束帧中改变页面的opacity属性的属性值来实现效果；

④ 如果要想实现让多个属性值同时变化的动画，只需要在各个关键帧中同时指定这些属性值就可以了；

div{
    position: absolute;
    background-color: yellow;
    top:100px;
    width:500px;
}
@keyframes mycolor{
    0%{
           background-color: red;
           transform: rotate(0deg);
           opacity: 0;
    }
    40%{
            background-color: darkblue;
            transform: rotate(30deg);
    }
    70%{
            background-color: yellow;
            transform: rotate(-30deg);
    }
    100%{
            background-color: red;
            transform: rotate(0deg);
            opacity: 1;
    }
}
div:hover{
    animation-name: mycolor;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count:infinite;
}