CSS3中的动画示例

不念不忘少年蓝@ 2022-12-25 02:49 89阅读 0赞

![format_png][]

![format_png 1][]

大家好，欢迎来到雄雄的小课堂，上一期我们分享了几个CSS变形案例，大家还记得有哪几个吗？原文在这里：[CSS3的几个变形案例……][CSS3]

今天，我们来看看CSS的过渡：

过渡

简单的来讲，就是元素由一种状态（样式）转变到另一种时的过程，可以称之为过渡。我们来口头举个例子：

某div初始的宽和高均为200px,背景色为红色（red）,当鼠标悬浮时，我们想让其原地转一圈，背景色为黄色(yellow),那么由红色转到黄色的这个过程，即过渡……

语法：

transition: transition-property transition-duration transition-timing-function transition-delay;

大部分人一看这个语法，心理难免咯噔一下，我去，这么多啊……

其实不然，我们将其属性和挨个分析一下：

transition-property：规定应用过渡的 CSS 属性的名称；值可以width,height,background-color等，也可以是all,一般为了方便都写all。

transition-duration：定义过渡效果花费的时间；值可以是1s,2s等。秒数越大，动画执行的越慢。

transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。其余的值还有: linear       （匀速执行），ease（规定慢速开始，然后变快，然后慢速结束），ease-in（规定以慢速开始的过渡效果），ease-out（规定以慢速结束的过渡效果），ease-in-out（规定以慢速开始和结束的过渡效果）

transition-delay：规定过渡效果何时开始。默认是 0。也可以是具体的秒数，1s,2s等。

最后使用代码举个例子吧：

有如下div元素：

<div id="div6">
          6
        </div>

css样式为：

#div6{
            transition: all 1s ease-in-out;
          }
          #div6:hover{
            transform: translate(10px,10px) rotate(360deg);
            background:beige;
          }

运行效果如图所示：

![format_png 2][]

**往期精彩**

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

[2020-11-18][CSS3]

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

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

[2020-11-17][jsp_cookie]

[![format_png 4][] ][jsp_cookie]

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

[2020-11-16][Java_TreeSet]

[![format_png 5][] ][Java_TreeSet]

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

[2020-11-15][Link 1]

[![format_png 6][] ][Link 1]

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

[2020-11-14][Link 2]

[![format_png 7][] ][Link 2]

[Vector是线程安全的？][Vector]

[2020-11-13][Vector]

[![format_png 8][] ][Vector]

![format_png 9][]

![format_png 10][]

点分享

![format_png 11][]

点点赞

![format_png 12][]

点在看

[format_png]: /images/20221120/8ab3fc7317964ac59b04a8a87dec58d0.png
[format_png 1]: /images/20221120/5495486577d84b6688baae5d56fdc2d9.png
[CSS3]: 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/868f2f09ffe14a8ca807048c6613bf9b.png
[format_png 3]: /images/20221120/a2124ed9da1443f5a2a4ad9d3ac3c5c2.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 4]: /images/20221120/616b92b4afba425fb3bec2c59ccd0373.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 5]: /images/20221120/fb68d16fd25741ccb3943679e48a090b.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 6]: /images/20221120/899ec09c04df4465ac254089600dcc97.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 7]: /images/20221120/0e8e69dacc5c42c1a847ccc04260d8de.png
[Vector]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fed8ea0f864988de87c561caa801822e981c1d69b48f4927284a8343641f5c6a117ad4e5b&idx=1&mid=2247497583&scene=21&sn=09827bd414f60e342cf8c132a9953afb#wechat_redirect
[format_png 8]: /images/20221120/adbf0d6e800148909ebe6d35c0ff469b.png
[format_png 9]: /images/20221120/284a6eb30f48477fa4c16f02977cb766.png
[format_png 10]: /images/20221120/3030eb22818e4fe7bf7112294269d9bd.png
[format_png 11]: /images/20221120/28461d9f0a334488bfdb7dc4f8882c33.png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy9EWjlUaWF4ZFF4azFPclNvckhkaWM4dlRXMmVWbFpSUzVaRTVpY3RyS0JvYWlid0l4aWNack11RE9YM0J6c0dPaExMWWdqMFM1NHVITGliREt2VGZqbktGOE9xQS82NDA?x-oss-process=image/format,png