CSS3的动画属性

文献种类：专题技术总结文
献开发工具与关键技术： DW
年级：20级 ；撰写时间：2021 年 7 月 27日




CSS3的动画属性
CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。



上面代码表示，当鼠标悬停在div元素上时，会产生名为move的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义move效果。.



至此，一个简单的动画例子就完成了：




默认情况下，动画只会播放一次。我们需要它无限次播放，可以添加animation-iteration-count:infinite;如下



当动画结束时候，元素样式默认回到初始状态。我们想要它保持在结束状态。可以添加animation-fill-mode: forwards;如下



我们需要动画延迟播放，可以通过animation-delay的设置来完成如下：



动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。如下：



动画也可以写成简写属性





这是我所学到的东西，所以我要分享给你们，希望可以帮助到你们！