CSS动画

文献种类：专题技术总结文献

开发工具与关键技术：MVC                       

作者：吴锦华      ；年级：20级    ；撰写时间：2021   年 7  月  7日

文献编号：                归档时间：   年   月   日

CSS动画

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

开发工具与关键技术：MVC

作者：吴锦华

撰写时间：2021/7/7

为了弥补过渡属性的缺点，css3推出了动画属性Animation。

CSS3的动画属性

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

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

@keyframes 规则

可以通过百分比设置  例如 @keyframes move{

0%{}

50%{}

100%{}

}

也可以   @keyframes move{

from{}

to{}

}

*/

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

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

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

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

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

动画也可以写成简写属性

下面的表格列出了 @keyframes 规则和所有动画属性：

这是我所学到的 CSS，所以我要分享给各位亲，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不

懂得地方欢迎在评论区教导和提问喔