什么是CSS动画？动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的CSS属性。如需使用CSS动画，您必须首先为动画指定一些关 键帧。关键帧包含元素在特定时间所拥有的样式。配置动画 创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现，具体情况参见 使用 keyframes 定义动画序列 小节部分。 animation 的子属性有： animation-delay ...使用 keyframes 定义动画序列 一旦完成动画的时间设置，接下来就需要定义动画的表现。 通过使用 @keyframes 建立两个或两个以上关键帧来实现。首先编写我们想要的动画

@keyframes 规则要创建CSS动画，您首先需要了解@keyframes规则，@keyframes规则用来定义动画各个阶段的属性值优点浏览器会对CSS3动画做一些优化，导致CSS3动画性能上稍有优势（新建一个图层来跑动画）。CSS3动画的代码相对简单。 CSS缺点：动画控制上不够灵活。兼容性不佳部分动画无法实现（视差效果、滚动动画）语法说明如下：关键帧有两种写法：From....to百分比模式%@keyframesdot{ from {background-color: red;} to {background-color: yellow;}}上下效果同等。@keyframesdot{ 0% { background-color: red;} 100% {background-color: yellow;}}接下来编写完动画，需要使用该动画。animation-name：设置需要绑定到元素的动画名称；animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；animation-timing-function：设置动画的速度曲线，默认为 ease；animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；animation-delay：设置动画开始之前的延迟时间，默认为 0；animation-iteration-count：设置动画被播放的次数，默认为 1；animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；animation-play-state：设置动画是正在运行还是暂停，默认是 running；animation：所有动画属性的简写属性。CSS的形体变化 Transform API只能转换由盒模型定位的元素。Translate(移动)Scale(缩放)Rotate(旋转)Skew(倾斜)

网站前端制作之CSS常用动画效果_成都网站制作   https://cdnanqi.cn/wangzhanzhizuo/10999.html