[游戏开发] transition属性详细讲解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> transition属性详细讲解 -> 正文阅读

[游戏开发]transition属性详细讲解

transition属性的格式：

transition：transition-property，transition-duration，transition-timing-function，transition-delay；

它的四个过渡属性是这样的意思：

transition-property：规定设置过渡效果的属性名称。

transition-duration：规定完成这个过渡效果需要多少秒或者毫秒。

transition-timing-function：规定这个过渡效果的速度曲线。

transition-delay：规定过渡的延迟时间。

过渡的动画类型主要有：

linear：线性过渡。

ease：平滑过渡。

ease-in：逐渐加速。

ease-out：逐渐减速。

ease-in-out：先加速后减速。

他们的属性介绍主要是：

linear：规定以相同的速度开始至结束的过渡效果。

ease：规定慢速开始逐渐变快然后慢速结束的过渡效果。

ease-in：规定以慢速度开始的过渡效果。

ease-out：规定以慢速度结束的过渡效果。

ease-in-out：规定以慢速开始至结束的过渡效果。

我们做一个小例子，我们利用伪类，当光标移动在div上，背景颜色由红色变成绿色：

???????

<style> ? ?.div1{ ? ? ?width: 100px; ? ? ?height: 100px; ? ? ?background-color: red; ? ? ?transition: background-color 2s linear; ? ?} ? ?.div1:hover{ ? ? ?background-color: green; ? ?} ?</style> </head> <body> ? <div class="div1"></div> </body>

总体来说：transition属性还是搭配伪类用的比较多，比如hover、：focus，但是也常会用到javascript、@madia触发。transition和javascript的结合更为强大。js用来设定要变化的样式，transition则负责动画效果。我们一般都在css里面写transition，transition属性可以指定参与的过渡属性，过度时间，过渡延迟时间以及过渡动画类型等。

在写代码的时候发现transition-property属性不显示，我后来去博客查了查，才知道目前的主流浏览器，需要我们在实际开发中加浏览器厂商的前缀。我们举个例子。

.lzr{ ?-webkit-transition: backgorund 0.5s ease 0; ?-moz-transition: backgorund 0.5s ease 0; ?-ms-transition: backgorund 0.5s ease 0; ?transition: backgorund 0.5s ease 0; ?}

写完了，看看浏览器端，IE没问题，chrome没问题，火狐也没问题，Opera问题来了，居然没有效果，最后发现Opera要这样写：