CSS3动画效果transition

番茄西红柿发布于2019-04-23 11:57 / 827人阅读

摘要：鼠标移动触发的动画效果。第二个参数就是动画耗时，默认是，所以必不可少，要不然没有动画效果，没什么可说的。多个样式各个样式用逗号隔开即可宽度完成变化，高度延迟执行，完成变化，背景色完成变化效果如下未完待续

1.transition的浏览器支持情况

IE10+支持，IE6789都不支持！目前，其他浏览器最新版本都支持，不需要再加前缀 -webkit- 之类的了

2. 还是一步一步说说怎么用transition吧

页面只有一个div，其css如下：

鼠标移动到div上，div立刻变宽为300px，效果如下：

现在在div身上加上 transition:0.5s;

效果如下：

原来是瞬间，现在div的css样式中加入了transition属性，变成了缓慢的动画了。那么问题来了，如下：

3.transition写在哪？

继续上面的案例，我们写在div上，就是告诉div，以后变化将会有过渡，为什么不是加在div:hover中？

将div里的transition:0.5s删掉，放在div:hover中，（css代码略）效果如下

鼠标放在上面，效果还好，慢慢伸长，鼠标一松，立刻变短，没有过渡效果。为什么？

因为div:hover状态时，有这个transition属性，而div由短变长中，给个过渡，就有动画。当鼠标离开div，不是hover状态了，div没有transition属性，所以，立刻变短。

既然是变化，那就至少涉及到两个状态，变化前的状态，变化后的状态。两个状态不一样，然后给予慢镜头过渡。就形成了动画。

也就是说：你想让谁的变化具有动态过渡的效果，那transition属性就加在谁身上，还要加的让变化前后两个状态，都能有transition属性（要知道，div:hover时，也可有获取到div中的属性，反过来就不行了）。

在这里，变化前是div，变化后div:hover，两个显示出来不同。鼠标移动触发的动画效果。那么这就有个问题了，如下：

4.怎么触发transition动画？

上面知道，变化前div {...} ，变化后 div:hover {...} 。其中:hover状态就是鼠标移动过去触发的。这种就是通过伪类触发。

伪类触发比如 :hover : focus :checked :active，有了这些伪类，就有了“状态”，有了状态，就有了不同，有了不同，就有了过渡动画。

还可以通过js触发，比如说：js控制div增加个class为donghua，那么，页面中该div增加个class，其属性要变，如果设置过transition，那就会有动画效果。这么理解吧：浏览器发现该div变成div.donghua了，而且发现形状大小色彩等前后不一样了，给前后状态变化的过程来个慢镜头，就形成了动画。

 1     
 2         <style type="text/css">
 3             div {
 4                 height:30px;
 5                 background-color:#FF9900;
 6                 
 7                 width:100px;
 8                 transition: 0.5s;
 9             }
10             div.donghua {
11                 width: 300px;
12             }
13         style>
14 ...
15 
16         <div class="donghua">
17             
18         div>

上面的并不会有动画效果，因为页面显示出来的时候，就已经有了class="donghua" ，覆盖了原来100px的定义，直接显示宽度为300px了。下面个例子演示js控制，导致的变化，有了变化，也就有了动画。

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6         <style type="text/css">
 7             p {
 8                 height:30px;
 9                 background-color:#FF9900;
10                 
11                 width:100px;
12                 transition: 0.5s;
13             }
14             div.donghua p{
15                 width: 300px;
16             }
17         style>
18     head>
19     <body>
20         <div>
21             <p>看我的变化p>
22         div>
23         <script type="text/javascript">
24             window.onload = function(){
25                 document.body.children[0].onclick = function(){
26                     if(this.className == donghua){
27                         this.className = ;
28                     }else{
29                         this.className = donghua;
30                     }                
31                 }
32             }
33         script>
34         
39     body>
40 html>

效果如下：

知道动画怎么触发的了，下面就要讲讲transition的具体参数了

5.transition都有哪些参数？默认是什么？可以怎么写？

transition是这四个属性的复合样式

属性名	描述
transition-property	指定CSS属性的name，transition效果（元素上的什么css属性变化，默认是all，上面例子就是div的width变化，设置为none则无变化）
transition-duration	transition效果需要指定多少秒或毫秒才能完成（可以是1s、0.5s、200ms，默认0）
transition-timing-function	指定transition效果的转速曲线（匀速呢？还是先快后慢，或是先慢后快，等等...默认ease）
transition-delay	定义transition效果开始的时候（等多久开始，默认0）

transition: property duration timing-function delay;

默认all 0 ease 0

先讲讲transition-property，举例：

 1         div {
 2             width:100px;
 3             height:30px;
 4             background-color:#FF9900;
 5             transition: 1s;
 6         }
 7         div:hover {
 8             width: 300px;
 9             height: 90px;
10             background-color: green;
11         }

页面只有一个div标签，动画效果如下，鼠标移上去，宽高背景色都慢慢变了：

现在，把上面css第5行的transition: 1s;改为transition:width 1s; 那么就只有width是渐变，其他的都是突变，效果如下：

transition-property默认是all，这个例子就是写的width，那就只有width渐变，也可以写none，那就没有渐变效果了，等于没写。

第二个参数就是动画耗时 transition-duration，默认是0，所以必不可少，要不然没有动画效果，没什么可说的。

第三个参数transition-timing-function的值：

ease（默认值）逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier贝塞尔曲线(x1,y1,x2,y2)

http://cubic-bezier.com/ 这个网站是贝塞尔曲线数据生成工具，使用贝塞尔曲线的代码示例如下

    transition:all 1s cubic-bezier(0.27,1.01,0.95,0.22)

第四个参数是延迟时间，就是等待多久才开始执行动画。（在做导航栏下拉菜单时，有个延迟时间，让鼠标划过时不会立即显示，防止误划）上面的都没有设置，如果设置为2s，那边鼠标移动上去div上，div是hover状态，但是要等2s后，动画执行开始，如果不到2s鼠标就移开了，div就不是hover状态了，那就不执行动画了。

上面我们对几个参数搞清楚了，但是有个问题就是，宽高背景要么一起开始变，要么就只有某个突然变，我要想让宽度变化1s完成，高度变慢点2s完成，背景更慢3s完成，怎么办？写3次transition吗？答曰：用逗号隔开即可。

6.transition多样式怎么写？

还是上面div变化的案例，代码就不重新搬运了，只写改动的部分。

            /* 多个样式各个样式用逗号隔开即可  */
            /* 宽度1s完成变化，高度延迟1s执行，2s完成变化，背景色3s完成变化 */
            transition:width 1s, height 2s 1s, background 3s;

效果如下：

未完待续

服务器托管超融合服务器 css3动画高性能css3动画浮动效果动画翻转动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1391.html

css3中的变形（transform）、过渡（transition）、动画（animation）属性

摘要：中制作动画的几个属性中的变形过渡动画。默认值为，为时，表示变化是瞬时的，看不到过渡效果。实现动画效果主要由两部分组成通过类似动画中的帧来声明一个动画在属性中调用关键帧声明的动画。 css3中制作动画的几个属性：css3中的变形（transform）、过渡（transition）、动画（animation）。一、 CSS3变形（transform）语法： transform ： no...

waruqi 2019-08-30 10:51 评论0 收藏0
css3动画属性详解之transform、transition、animation

摘要：动画属性详解关于制作动画的几个属性变形转换和动画。一属性旋转中心为原点扭曲倾斜缩放移动矩阵变形。各个属性的用法旋转其中表示度。承载动画的另一个属性。定义动画的名称。一个或多个合法的样式属性。 css3动画属性详解：关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)。一、transform 属性：旋转rotate（中...

Riddler 2019-08-30 12:46 评论0 收藏0
CSS3 新特性

摘要：语法说明对象选择器投影方式轴偏移量轴偏移量模糊半径阴影扩展半径阴影颜色内阴影，向右偏移，向下偏移，模糊半径，阴影缩小属性的参数设置取值阴影类型此参数可选。 CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规范还没有正式发布，但是现代浏览器已经支持相当多的 CSS3 属性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

justjavac 2019-08-29 13:07 评论0 收藏0
CSS3的过渡和动画

摘要：转化的转化分为以下几种移动旋转缩放倾斜混合每种转化都还有对应的版本注意闭合的内联元素不支持转化，过渡和动画如等。过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。在开始之前，首先看看CSS3的转化。转化 CSS3的转化分为以下几种： translate 移动 rotate　旋转 scale　缩放 skew　倾斜 matrix　混合每种转化都还有对应的3d版...

andong777 2019-08-30 13:53 评论0 收藏0
不会做动画的程序猿不是好的动画师（如何用css3动画做动画）

摘要：一过渡一的作用二的属性二和动画一动画序列书写简例二书写简例常用属性简写属性三完整动画简例代码三转换一转换缩放移动旋转设置元素转换的中心点综合性写法二转换三维坐标系透视呈现位移旋转一过渡一的作用如果你有一个盒子，他的体内也有个小盒子。 ...

xeblog 2021-11-11 16:55 评论0 收藏0
面试官: css3动画了解吗? 我: .......

摘要：过渡允许的属性值在一定的时间区间内平滑地过渡。需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。需要事件触发，所以没法在网页加载时自动发生。是一次性的，不能重复发生，除非一再触发。 transition(过渡) transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值...

番茄西红柿 2019-05-23 15:55 评论0 收藏0