CSS动画示例（上一篇是CSS过渡…）

逃离我推掉我的手 2022-12-25 02:49 140阅读 0赞

![format_png][]

![format_png 1][]

大家好，欢迎来到雄雄的小课堂，前面，我们将CSS的变形和过渡都整理了，有需要的可以移步这里看：

[CSS3中的动画示例][CSS3]

[CSS3的几个变形案例……][CSS3 1]

今天，我们来看看CSS3的动画。

CSS3使用动画分为两个步骤：

1.通过类似flash动画的关键帧来声明一个动画。

2.在animation属性中调用关键帧声明的动画，实现一个更为复杂的动画效果。

接下来我们具体来看看CSS3是如何实现动画的？

# 01 #

设置关键帧

在CSS3中，把**@keyfreams**成为关键帧，这个关键帧可以设置多段属性，其语法为：

@keyfreams name{
    
           from{//CSS代码}
    
           percentage{//CSS 代码}
    
           to{//CSS 代码}
    
    }

也可以将from、percentage和to换成百分比，如下：

@keyfreams name{
           0%{//CSS代码}
           50%{//CSS 代码}
           100%{//CSS 代码}
    }

语法解析：

**name**:动画的名称，通过该名称来调用该动画

**percentage（50%）**：是一个百分比，主要用来定义某个时段的动画效果。

下面我们来看一段代码：

Html代码：

CSS样式代码：

/*声明一个动画*/
          @keyframes name{
            0%{
              width: 200px;
              height: 200px;
              background: yellow;
            }
            50%{
              width: 400px;
              height: 400px;
              background: green;
            }
            75%{
              width: 500px;
              background: black;
            }
            100%{
              width:600px ;
              height: 600px;
              background: cornflowerblue;
            }
          }

# 02 #

调用动画

**@keyfreams**只是用来声明动画效果的，但是如果不调用它的话，它就不会起什么效果，下面我们来看看怎么通过**animation**来调用动画。

语法：

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode

语法好长，下面来解释一下吧。

**animation-name**：调用的动画名称

**animation-duration animation-timing-function animation-delay**：分别是过渡时间，过渡方式，延迟时间。

**animation-iteration-count**：动画的播放次数，可以是整数，如果是infine的话，则是无限循环。

**animation-direction**：动画播放的方向，normal表示向前播放，alternate表示一前一后（播放次数偶数向前播放，奇数则反方向播放）。

**animation-play-state**：动画的播放状态，running和paused.

下面我们来看看调用动画的代码：

#div7:hover{
            animation:name 1s infinite alternate ease-in-out;
          }

效果如图所示：

![format_png 2][]

**往期精彩**

[CSS3中的动画示例][CSS3]

[2020-11-19][CSS3]

[![format_png 3][] ][CSS3]

[CSS3的几个变形案例……][CSS3 1]

[2020-11-18][CSS3 1]

[![format_png 4][] ][CSS3 1]

[jsp中使用cookie时报错……][jsp_cookie]

[2020-11-17][jsp_cookie]

[![format_png 5][] ][jsp_cookie]

[Java中的TreeSet集合会自动将元素升序排序][Java_TreeSet]

[2020-11-16][Java_TreeSet]

[![format_png 6][] ][Java_TreeSet]

[“老师，请您多关注一下我吧！！！”][Link 1]

[2020-11-15][Link 1]

[![format_png 7][] ][Link 1]

[晨读，难道只是为了完成任务而读的吗？][Link 2]

[2020-11-14][Link 2]

[![format_png 8][] ][Link 2]

![format_png 9][]

![format_png 10][]

点分享

![format_png 11][]

点点赞

![format_png 12][]

点在看

[format_png]: /images/20221120/780bcd2b92324df48ebcf71990f1f2d7.png
[format_png 1]: /images/20221120/e817fa6ccb1e4c8e96abdb658060192a.png
[CSS3]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe2ada0f86bbb6bc7be61163512c6f1dd5dd1661df117d5b15c648098a166cb9d41c06eaa&idx=1&mid=2247497804&scene=21&sn=925b834f185cf286878c53b48762cb17#wechat_redirect
[CSS3 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe2d3a0f86bc5c1f5f8a404e06a1531fadfbe7371736324f3c4cb9bca1d1d8fe933180ed9&idx=1&mid=2247497778&scene=21&sn=5d37f9031849c431b6162c6924ab3104#wechat_redirect
[format_png 2]: /images/20221120/59cdc8d98ebe437f83100771e3b4e2e5.png
[format_png 3]: /images/20221120/af1092a549c844b896e456fafad62d68.png
[format_png 4]: /images/20221120/e9a430c560014fcaafbabab4a18decc2.png
[jsp_cookie]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fe2f1a0f86be72b3b5c2d7861f0c6b6968716dbbcca9247bd921dc75b958f70ab114057a8&idx=1&mid=2247497744&scene=21&sn=c2d10c6843b01cf31691acc566fc97ed#wechat_redirect
[format_png 5]: /images/20221120/04f35d7591bc437d86519bd6e2ecfc57.png
[Java_TreeSet]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fed12a0f8640424ebaefec2e2921761954d8ff33779c748fa498d98654916399e4cad6d00&idx=1&mid=2247497715&scene=21&sn=8c7a791418b81fffec9310aeecfe5f5c#wechat_redirect
[format_png 6]: /images/20221120/a7303fafce6a47f08753dda123a0c754.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fed50a0f864464127cf440141be3804d1a7b901f51c9f68f2220c6ea8d8909ca415394b93&idx=1&mid=2247497649&scene=21&sn=9d2d61fa598db51ab97aaf6a325ec28e#wechat_redirect
[format_png 7]: /images/20221120/441d56b209d64c7d933021f458d3f355.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fed76a0f864600119dc6a8a11604bea30682a58f91335a12343179e5a008437f9d236d395&idx=1&mid=2247497623&scene=21&sn=233648dd5e98304d40409f9a190dbcc9#wechat_redirect
[format_png 8]: /images/20221120/247f4896dfff40968f652b05514e36f0.png
[format_png 9]: /images/20221120/0c53fbf23af645e597fa285670221790.png
[format_png 10]: /images/20221120/7cd586e4897745b3ba5f7af350c1fcc6.png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azFPclNvckhkaWM4dlRXMmVWbFpSUzVaZE1rWUVJUTY4bWF6YWxLTkxZUFdtWDZ0Y2d2RjZpYjhnZ3pxMTVNUER5aWFaR3hxeGxSaWJNMDhnLzY0MA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azFPclNvckhkaWM4dlRXMmVWbFpSUzVaRTVpY3RyS0JvYWlid0l4aWNack11RE9YM0J6c0dPaExMWWdqMFM1NHVITGliREt2VGZqbktGOE9xQS82NDA?x-oss-process=image/format,png