關(guān)鍵幀--keyframes
只需指名兩個(gè)狀態(tài),之間的過程由計(jì)算機(jī)自動(dòng)計(jì)算
-
- 數(shù)字: 0% 25% 100%等(不寫0%或100%的狀態(tài),就默認(rèn)為已經(jīng)設(shè)置的樣式)
- 字符: from(0%) , to(100%)
-
- @keyframes 動(dòng)畫名稱{動(dòng)畫狀態(tài)}
@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>關(guān)鍵幀</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: 動(dòng)畫時(shí)間 延遲時(shí)間 動(dòng)畫名稱 運(yùn)動(dòng)狀態(tài) 次數(shù) 播放前重置
-webkit-animation:2s 1s move linear infinite alternate
動(dòng)畫播放暫停
- animation-play-state: 播放狀態(tài)(running播放和paused暫停)
播放前重置用的很少
- alternate:動(dòng)畫直接從上一次挺值得位置開始執(zhí)行
- normal :動(dòng)畫第二次直接跳到0%的狀態(tài)開始執(zhí)行
animation-Js結(jié)合
- 通過class
- 在class里面加入animation的各種屬性
- 直接給元素加入 -webkit-animation-xxx樣式
- animation的問題
- 寫起來(lái)麻煩
- 沒辦法改變目標(biāo)點(diǎn)的位置
obj.addEventListener("webkitAnimationEnd",function(){})
走回字和鼠標(biāo)暫停
小球運(yùn)動(dòng).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>
正序倒序播放
小球運(yùn)動(dòng)正序或者倒敘.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>
處理完畢后回到默認(rèn)的樣式
<!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>通過類名加動(dòng)畫效果</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>點(diǎn)擊后配合animationEnd事件點(diǎn)擊后就會(huì)變化</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>
簡(jiǎn)易版本的無(wú)縫滾動(dòng)
效果圖
無(wú)縫滾動(dòng).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>簡(jiǎn)易版本的無(wú)縫滾動(dòng)</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 知識(shí)點(diǎn)全部完畢
