您的位置：首页 > Web前端 > CSS

CSS3_animation 关键帧动画

2018-02-27 11:46 549 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3_animation 关键帧动画</title>
<style type="text/css">
#box{width:500px; height:500px; border:4px solid red; margin:100px auto; position:relative}
#box div{width:100px; height:100px; background: #0000ff; position: absolute; left: 0; top:0;
}
#box .zou{
animation: 1s zou ease 1; /*然后调用动画*/
left:400px; top:400px;/*还原初始值*/
}
@keyframes zou{ /*定义一套关键帧*/
0%{
left:0;
top:0;
}
25%{
left:400px;
top:0
}
100%{
left:400px;
top:400px;
}
}
</style>
</head>
<body>
<div id="box">
<div class="zou">

</div>
</div>

动画
animation
①首先定义一套关键帧
方法：
@keyframes 动画名称{
0%{
相应的样式
}
25%{
相应的样式
}
50%{
相应的样式
}
75%{
相应的样式
}
100%{
相应的样式
}
}
注：可以从0%一直设置到100%

② 然后调用动画名称
方法：
animation: 1s 2s 动画名称运动方式动画执行的次数；
第一个值：运动的总时间
第二个值：延迟的运动时间
第三个值：动画名称
第四个值：运动方式
liner 匀速
ease 慢速开始，然后慢慢变快
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 开始和结束都慢
cubic-bezier(1,0,1,0) 贝瑟尔曲线工具 http://xuanfengge.com/easeing/ceaser 第五个值：动画执行的次数( 可以是具体的数值，也可以是无限次 infinite )

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

CSS3_animation 关键帧 动画

CSS3_animation 关键帧动画