css 动画

最新推荐文章于 2025-05-05 15:39:52 发布

原创最新推荐文章于 2025-05-05 15:39:52 发布 · 107 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

16 篇文章

订阅专栏

本文通过一个具体的CSS动画实例，详细解析了如何使用CSS keyframes实现元素的移动动画，包括动画的持续时间、执行次数及方向控制。具体展示了如何设置元素的宽度、高度、背景颜色、位置属性，并使用animation属性调用关键帧实现从左到右的移动效果。

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;

animation:mymove 2s 4 alternate;/*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}


</style>
</head>
<body>

<div></div>

</body>
</html>

2s表示每次两秒一共执行4次。 alternate表示需要反向播放，那一共有两个来回。