关键帧--keyframes
只需指名两个状态,之间的过程由计算机自动计算
-
- 数字: 0% 25% 100%等(不写0%或100%的状态,就默认为已经设置的样式)
- 字符: from(0%) , to(100%)
-
- @keyframes 动画名称{动画状态}
@keyframes move{from{background:red;} to {background:green};}
可以只有to
animation基本使用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>关键帧</title>
</head>
<style>
*{margin: 0px;padding:0px;}
@-webkit-keyframes move {
0%{width:0px;}
30%{width:50px;}
50%{width:100px;}
75%{width:150px;}
100%{width:200px;}
}
@-moz-keyframes move{
0%{width:0px;}
30%{width:50px;}
50%{width:100px;}
75%{width:150px;}
100%{width:200px;}
}
@keyframes move{
0%{width:0px;}
30%{width:50px;}
50%{width:100px;}
75%{width:150px;}
100%{width:200px;}
}
.box{background:red;width:200px;height:30px;border:1px solid black;-webkit-animation:2s move linear;-moz-animation: 2s move linear;}
</style>
<body>
<div class="box"></div>
</body>
</html>
animation属性
-webkit-animation: 动画时间 延迟时间 动画名称 运动状态 次数 播放前重置
-webkit-animation:2s 1s move linear infinite alternate
动画播放暂停
- animation-play-state: 播放状态(running播放和paused暂停)
播放前重置用的很少
- alternate:动画直接从上一次挺值得位置开始执行
- normal :动画第二次直接跳到0%的状态开始执行
animation-Js结合
- 通过class
- 在class里面加入animation的各种属性
- 直接给元素加入 -webkit-animation-xxx样式
- animation的问题
- 写起来麻烦
- 没办法改变目标点的位置
obj.addEventListener("webkitAnimationEnd",function(){})
走回字和鼠标暂停
小球运动.gif
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>走回字和暂停播放</title>
</head>
<style>
*{margin:0px;padding:0px;}
.box{width:400px;height:400px;border:1px solid black;margin:100px auto;position:relative;}
@-webkit-keyframes move {
25%{left:370px;top:0px;}
50%{left:370px;top:370px;}
75%{left:0px;top:370px;}
100%{left:0px;top:0px;}
}
.box:hover .circle{-webkit-animation-play-state: paused;}
.circle{width:30px;height:30px;background:red;border-radius: 50%;position:absolute;left:0px;top:0px;-webkit-animation: 4s 1s move infinite;}
</style>
<body>
<div class="box">
<div class="circle"></div>
</div>
</body>
</html>
正序倒序播放
小球运动正序或者倒叙.gif
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>走回字和暂停播放</title>
</head>
<style>
*{margin:0px;padding:0px;}
.box{width:100px;height:100px;border:1px solid black;margin:100px auto;position:relative;}
@-webkit-keyframes move {
25%{left:70px;top:0px;}
50%{left:70px;top:70px;}
75%{left:0px;top:70px;}
100%{left:0px;top:0px;}
}
.box:hover .circle{-webkit-animation-play-state: paused;}
.circle{width:30px;height:30px;background:red;border-radius: 50%;position:absolute;left:0px;top:0px;-webkit-animation: 4s 1s move infinite alternate;}
</style>
<body>
<div class="box">
<div class="circle"></div>
</div>
</body>
</html>
处理完毕后回到默认的样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>animation后面加class</title>
</head>
<style>
*{margin:0px;padding:0px;}
.box{width:100px;height:100px;border:1px solid black;margin:100px auto;position:relative;}
@-webkit-keyframes move {
0%{left:0px;top:0px;}
25%{left:70px;top:0px;}
50%{left:70px;top:70px;}
75%{left:0px;top:70px;}
100%{left:0px;top:0px;}
}
.circle{width:30px;height:30px;background:red;border-radius: 50%;position:absolute;left:0px;top:0px;}
.move{-webkit-animation: 4s 1s move ; /*最后的left*/left:70px;}
p{font-size:23px;text-align:center;}
</style>
<body>
<p>通过类名加动画效果</p>
<div class="box">
<div class="circle move"></div>
</div>
</body>
</html>
animationed事件
效果如下
animationEnd.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>配合animationEnd</title>
<style>
@-webkit-keyframes move {
0% {
width: 100px;
}
100% {
width: 500px;
}
}
@-moz-keyframes move {
0% {
width: 100px;
}
100% {
width: 500px;
}
}
@keyframes move {
0% {
width: 100px;
}
100% {
width: 500px;
}
}
.box {width: 100px; height: 100px; background: red;}
.move {-webkit-animation: 2s move; -moz-animation: 2s move; animation: 2s move; width: 500px;}
p{text-align:center;}
</style>
</head>
<body>
<p>点击后配合animationEnd事件点击后就会变化</p>
<div class="box" id="box"></div>
<script>
document.getElementById('box').onclick = function(){
this.className = 'box move';
addEnd(this, fn);
}
function fn(){
alert('end');
}
function addEnd(obj, fn){
obj.addEventListener('webkitAnimationEnd', fn, false);
obj.addEventListener('animationend', fn, false);
}
</script>
</body>
</html>
简易版本的无缝滚动
效果图
无缝滚动.gif
代码如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>简易版本的无缝滚动</title>
</head>
<style>
*{margin:0px;padding:0px;}
ul{list-style-type:none;}
li{float:left;}
#wrap{width:250px;height:50px;position:relative;bordr:1px solid #ccc;margin:100px auto;overflow: hidden;}
#wrap ul{position:absolute;left:0px;top:0px;height:50px;width:500px;-webkit-animation: 3s 1s move infinite;}
#wrap ul li {width:50px;height:50px;font:24px/50px "微软雅黑";background:black;color:#ffffff;text-align:center;}
@-webkit-keyframes move {
0%{
left:0px;
}
100%{left:-250px;}/*走的距离就是盒子的宽度*/
}
#wrap:hover ul{-webkit-animation-play-state: paused;}
</style>
<body>
<div id="wrap">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
以上CSS3 animation 知识点全部完毕
