<!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>
<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>
598
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
