2021-05-08

                  CSS3的动画属性

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： DW

作者：夜袭寡妇村

撰写时间：2021/5/8

 

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

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

 

 

 

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

 

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

 

 

 

动画也可以写成简写属性

 

 

 

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

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！