在CSS3中,定义动画需要用到animation
属性。下面是一个简单的例子:
.box{ width: 100px; height: 100px; background-color: red; animation: move 2s linear infinite; } @keyframes move{ from{ transform: translateX(0); } to{ transform: translateX(200px); } }
在这个例子中,大家定义了一个名为move
的关键帧动画,并将它应用到了一个名为box
的元素上。这个动画的每次循环会持续2秒钟(2s
),以线性(linear
)的方式运动,并不断重复(infinite
)。
而在关键帧动画中,大家定义了from
和to
两个关键帧,表示元素移动的过程。在这个例子中,大家让元素从原来的位置横向移动200像素的距离。
当然,在CSS3动画中,还可以定义更加复杂的动画效果,例如淡入淡出、旋转、缩放等效果。大家只需要通过变换from
和to
以及其他需要的关键帧即可完成最终的动画效果。
总之,CSS3动画是前端开发中不可或缺的一部分,可以帮助大家为网页增加更多的互动性和生动性。