前端初体验——css 动画 学习

 1.过渡动画

 transition 复合属性

transition-property 指定对HTML元素的哪个css属性及逆行平滑处理 all指所有

div{
    width: 100px;
    height: 100px;
    background: burlywood;
    transition-property:all;  
}
div:hover{
    width: 300px;
    height: 200px;
    background: cadetblue;
    border-radius: 50px;
}

transition-duration：指定平滑渐变持续的时间

持续三秒

  transition-duration:3s 

transition-timing-function 渐变的速度 有以下几个取值：

            ease动画开始时慢 加快再变慢

            linear 先行速度 均速

            ease-in 开始较慢后逐渐加快

            ease-out 开始最快后逐渐减慢

transition-timing-function:ease;
transition-timing-function:ease-in;
transition-timing-function:linear;

2.帧动画

（1）关键帧的定义

 @keyframes+动画的name

@keyframes aaa{
  from|to|百分比{
        属性1：值；
        属性2：值；
        .......
    }
}

from | to | 百分比 是动画过程中的位置。 from从头开始，to到结尾为止，百分比是进程中的位置举例：

@keyframes aaa{

     50%{
        width: 600px;
        height: 400px;
        background-image: url(monkey.jpg) ;
        background-size: cover ;
        border-radius: 150px;
     }

     100%{
        width: 400px;
        height: 200px;
        background: rgb(141, 237, 100);
        border-radius: 50px;
     }
 }

（2）关键帧的插入

animation: 复合属性

animation-name：设置动画名称

animation:aaa ;

animation-duration: 指定动画持续的时间

animation-duration: 6s;

animation-timing-function 渐变的速度 有以下几个取值：

    ease动画开始时慢 加快再变慢

    linear 先行速度 均速

    ease-in 开始较慢后逐渐加快

    ease-out 开始最快后逐渐减慢

animation-timing-function: linear;

animation-delay: 延迟开始动画

参数为延迟开始的秒数

animation-delay:2s ;

animation-iteration-count: 设置动画执行次数

animation-iteration-count:infinite;无限次执行

animation-iteration-count:infinite;

animation-direction: alternate 设置动画播放的方向 首尾交替播放

animation-direction: alternate

简写 animation+enter

animation: name duration timing-function delay iteration-count direction fill-mode;

.jg{
    animation: bbb 5s ease 0s infinite;
}