《Css3动画效果》

原创于 2019-01-16 16:34:32 发布 · 224 阅读

CC 4.0 BY-SA版权

本文深入解析CSS3中2D与3D动画的实现方式，包括关键帧动画、过渡动画及各种变换属性如旋转、倾斜、缩放和位移等。详细介绍了animation属性的使用，如animation-name、animation-duration、animation-timing-function、animation-delay和animation-iteration-count，并通过实例展示了如何应用这些属性来创建动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 Css3动画效果（2D）
Animation：动画，有几个属性：animation-name：命名； animation-duration：持续时间； animation-timing-funtion:变化速度； animation-delay：动画延迟； animation-iteration-count：【infinite（无限循环播放）】执行次数。如：
在这里插入图片描述
@keyframes：调用动画
Transition动画：有位移、旋转、缩放、倾斜4种。Transform的几个属性： transform -rotate()：旋转; transform -skew()：扭曲； transform -scale(x,y)：缩放； transform -translate()：位移【有X轴和Y轴】； transform -matrix()：矩阵【水平方向跟垂直方向】； transform-origin：原点。
如：在这里插入图片描述