当用户打开页面的时候，有些动态元素从页面外部渐渐飞入页面。
并且产生来回振动的效果。提高元素的动画性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>animation</title>
<style>
*{margin:0;padding:0;}
.trans{
width:200px;
height:120px;
background:#0cc;
animation: trans 1s linear; /*linear匀速行驶*/
animation-fill-mode: forwards; /*保持最后一帧状态*/
}
@keyframes trans {
0% {margin-left:-200px;}
90% {margin-left: 520px;}
93% {margin-left: 480px;}
96% {margin-left: 515px;}
98% {margin-left: 485px;}
100% {margin-left:500px;}
}
</style>
</head>
<body>
<div class="trans"></div>
</body>
</html>
3566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
