动画效果

定义帧动画

@keyframe 定义帧动画
animation
animation-name: @keyframes定义
animation-duration: 动画持续的时间
animation-timing-function 时间函数
animation-delay 动画延迟时间

<style>
.box{
     position: absolute;
     left:0;
     top:0;
     width: 100px;
     height: 100px;
     background:red;
     /*动画执行*/
     animation: run 5s  cubic-bezier(0, 0, 0, 1.29) infinite alternate;/*调用动画*/
}
#兼容欧朋
@-o-keyframes run{
     0%,100%{left:0;top:0;}
     25%{left:200px;top:0;}
     50%{left:200px;top:200px;}
     75%{left:0;top:200px;}
     /*100%{left:0;top:0;}*/
}
#兼容火狐
@-moz-keyframes run{
     0%,100%{left:0;top:0;}
     25%{left:200px;top:0;}
     50%{left:200px;top:200px;}
     75%{left:0;top:200px;}
     /*100%{left:0;top:0;}*/
}
#兼容ie
@-ms-keyframes run{
     0%,100%{left:0;top:0;}
     25%{left:200px;top:0;}
     50%{left:200px;top:200px;}
     75%{left:0;top:200px;}
     /*100%{left:0;top:0;}*/
}
#兼容老版本的谷歌
@-webkit-keyframes run{
     0%,100%{left:0;top:0;}
     25%{left:200px;top:0;}
     50%{left:200px;top:200px;}
     75%{left:0;top:200px;}
     /*100%{left:0;top:0;}*/
}
/*定义动画  -  关键帧*/
/*标准用法*/
@keyframes run{
     0%,100%{left:0;top:0;}
     25%{left:200px;top:0;}
     50%{left:200px;top:200px;}
     75%{left:0;top:200px;}
     /*100%{left:0;top:0;}*/
}
</style>
<body>
<div class="box"></div>
</body>
用from和to来执行动画
<style>
.box{
     position: absolute;
     left:0;
     top:0;
     width: 100px;
     height: 100px;
     background:red;
     /*动画执行*/
     animation: run 1s forwards;
}
@keyframes run{
     /*关键字*/
     from{left:0;top:0;}
     to{left:200px;top:0px;}
}
<body>
<div class="box"></div>
</body>
重复动画

animation-iteration-count: 动画播放的次数
1默认 number / infinite 无限循环
animation-direction: 动画运动的方向
normal / alternate(正向反向交替进行) / 反向 reverse / alternate-reverse反向正向交替进行




<style>
.box{
    position: absolute;
    left:0;
    top:0;
    width: 100px;
    height: 100px;
    background:red;
    animation: run 1s ease-in-out 2 alternate-reverse; /*调用动画*/
}

/*定义动画  -  关键帧*/
@keyframes run{
    0%,100%{left:0;top:0;}
    25%{left:200px;top:0px;}
    50%{left:200px;top:200px;}
    75%{left:0;top:200px;}
    /*100%{left:0;top:0;}*/
}
</style>
<body>
<div class="box"></div>
</body>
posted @ 2020-10-20 15:31  qqaazzhf  阅读(38)  评论(0)    收藏  举报