animation动画汇总（一阶段项目）

Posted 2020-12-02 ace-suiyuan008

animation 属性

动画属性：

1、animation-name：规定需要绑定到选择器的 keyframe 名称。

2、animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

3、animation-timing-function：规定动画的速度曲线。

4、animation-delay：规定在动画开始之前的延迟。

5、animation-iteration-count：规定动画应该播放的次数。

6、animation-direction：规定是否应该轮流反向播放动画。

实例：

1、流星效果：

.start1{
    left: 1000px;
    width: 170px;
    height: 170px;
    position: absolute;
    margin: 0px;
    background:url(../../img/95858PICKE3.png);
    background-size: 170px 170px;
    animation:mymove1 3s infinite,fadeIn1 3s infinite;/*无限播放*/
    animation-delay:0s;
    animation-timing-function: linear;/*动画匀速进行*/
}
/*移动动画*/
@-webkit-keyframes mymove1
{
    from {left:1100px;top:50px}
    to {left:900px;top:250px}
}
/*关键帧改变透明度*/
@-webkit-keyframes fadeIn1 {
0% {
    opacity: 0; /*初始状态 透明度为0*/
}
50% {
    opacity: 0.5; /*中间状态 透明度为0.5*/
}
100%,24% {
    opacity: 0; /*结尾状态 透明度为0*/
    }
}

规定两个动画同时进行，使两者同步

2、时钟效果

/*指针div*/
.zhizhen{
position: absolute;
top: 180px;
left: 220px;
width: 300px;
height: 300px;
background: url(../../img/img_index.png)no-repeat;
animation-duration: 2s;/*动画时长*/
animation-timing-function: ease;/*动画执行一次*/
animation-delay: 0s;/*动画间隔*/
animation-direction: normal;/*动画正常播放*/
animation-fill-mode: both;/*动画保持在最后一帧*/
animation-iteration-count: 1;/*动画次数*/
animation-play-state: running;/*动画进行*/
animation-name: watchHand;/*动画名称*/
}
/*指针摆动效果*/
@-webkit-keyframes watchHand{
    0% {
        transform: rotate(0deg);
    }
    70% {
        transform: rotate(253deg);
    }
    80% {
        transform: rotate(248deg);
    }
    90% {
        transform: rotate(251deg);
    }
    100% {
        transform: rotate(250deg);/*旋转角度*/
    }
}

3、数字翻动效果

/*数字翻动动画*/
.shuzi_1{
    width: 40px;
    height:50px;
    position: absolute;
    top: 400px;
    left: 335px;
    overflow: hidden;
    background: url(../../img/watch_numb.png);
    animation-duration: 1.5s;/*动画时长4s*/
    animation-timing-function: steps(6, end);/*动画分为六部进行过渡，在完成6次过度停止*/
    animation-delay: 0s;/*动画等待时间*/
    animation-direction: normal;/*动画正常播放*/
    animation-fill-mode: both;/*动画保持在最后一帧*/
    animation-iteration-count: 1;/*动画次数*/
    animation-play-state: running;/*动画进行*/
    animation-name: watchNumb1;/*动画名称*/
}
@-webkit-keyframes watchNumb1{
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px -300px;/*位置移动*/
    }
}
.shuzi_2{
    width: 40px;
    height:50px;
    position: absolute;
    top: 400px;
    left: 375px;
    overflow: hidden;
    background: url(../../img/watch_numb.png);
    animation-duration: 0.5s;/*动画时长0.5s*/
    animation-timing-function: steps(10, end);/*动画分为十部进行过渡，在完成十次过渡停止*/
    animation-delay: 0s;/*动画等待时间*/
    animation-direction: normal;/*动画正常播放*/
    animation-fill-mode: none;/*动画正常进行*/
    animation-iteration-count: 3;/*动画次数*/
    animation-play-state: running;/*动画进行*/
    animation-name: watchNumb2;/*动画名称*/
}
@-webkit-keyframes watchNumb2{
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px -500px;/*位置移动*/
    }
}

衍申：利用div的超出隐藏和position定位改变可以实现许多动画效果