<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title></title> | |
<style type="text/css"> | |
/*@-webkit-keyframes changeColor{ | |
from{background-color: red;width: 200px;} | |
to{background-color: yellow;width: 400px;} | |
}*/ | |
@-webkit-keyframes changeColor{ | |
10%{margin-left: 20px;} | |
/*20%{background: yellow;} | |
30%{background: olivedrab;} | |
40%{background: pink;}*/ | |
50%{margin-left: 100px;} | |
/*60%{background: chocolate;}*/ | |
100%{margin-left: 150px;} | |
} | |
#wrap{width: 200px;height:200px;background: red; | |
} | |
#wrap:hover{ | |
/*animation: changeColor 3s ease-in-out;*/ | |
animation-name: changeColor; | |
animation-duration: 1s; | |
animation-timing-function: ease-in-out; | |
animation-delay: 1s; | |
/*animation-iteration-count:动画播放次数,infinite这个值表示一直播放*/ | |
/*animation-iteration-count: infinite;*/ | |
/*direction:alternate这个是往返,reverse:从最终状态往初始状态走*/ | |
/*animation-direction:reverse;*/ | |
/*fill-mode:决定动画的最终状态:forwards:停在结束的位置,backwards:动画结束后回到初始位置*/ | |
animation-fill-mode: forwards; | |
animation-play-state: paused; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="wrap"></div> | |
</body> | |
</html> |
关键帧
最新推荐文章于 2022-08-15 19:11:41 发布