CSS3过渡transition

最新推荐文章于 2021-06-18 02:52:43 发布

原创最新推荐文章于 2021-06-18 02:52:43 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端

CSS3 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了CSS3过渡属性，包括过渡的基本属性如transition-property、transition-duration等，以及如何使用多种过渡效果。此外还探讨了过渡的触发方式，例如通过伪元素、媒体查询或JavaScript触发过渡。

1.CSS3过渡属性：

4.四个属性值：

transition-property 要运动的样式（all || [attr] || none）
transition-duration 运动时间
transition-delay 延迟时间
transition-timing-function 运动形式

也提供简写方式：

transition: property duration timing-function delay;
transition: 过渡属性过渡所需时间过渡动画函数过渡延迟时间;

2.过渡属性transition-property

.过渡属性transition-property

3.过渡函数transition-timing-function

该属性指定某种过渡“缓动函数”的属性，可指定过渡速度等。

3-1：单一的过渡函数：

ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）

3-2：三次贝塞尔曲线：

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

单一的过渡函数过渡动画较为一般，相比也不十分精确，转而引出三次贝塞尔曲线，可有多个精确控制点。

简单版：
三次贝塞尔曲线

由图可得：P1、P2两点值都是一个0~1的小数，而P0和P3两个点是无法设置的！

曲线之美－－贝塞尔曲线 :http://blog.chinaunix.net/uid-20622737-id-3161025.html (感受一下)

当然，有很多的在线制作三次贝塞尔曲线工具：

http://cubic-bezier.com/#.17,.67,.83,.67
https://matthewlein.com/ceaser/ （给出兼容性前缀哈）

这部分说简单简单，其实暗藏玄机，要好好研究！（个人用来玩弹性运动！）

2.多个CSS3过渡效果

多属性过渡写法：（个人比较喜欢这种）

transition:background 2s linear 2s,border-radius 3s ease-in 4s;

3.CSS3触发过渡：

1.伪元素触发：
通过鼠标悬浮(:hover)来触发过渡。但是！触发过渡与触发器本身没有太大关系，触发过渡的是元素状态变化，只是凑巧，状态变化作为:hover事件的结果发生。这点不好消化！

可以使用:active、:focus、:checked来触发过渡。

2.媒体查询触发：

.box{
    width:100px;
    transition:width 2s ease .5s;
}
@media only screen and (max-width:960px){
    .box{
        width:200px;
    }
}

3.使用javascript触发：

$(selector).click(function(){
    $(".box").toggle("on");
});

4.transitionend事件：

指的是过渡完成事件一般用于将过渡后的状态恢复原状！
详见：http://www.runoob.com/jsref/event-transitionend.html

transitionend事件

给出的示例：

object.addEventListener("webkitTransitionEnd", myScript);  // Safari 3.1 到 6.0 代码

object.addEventListener("transitionend", myScript);        // Standard syntax

根据个人收罗的资料教程来看，这个在复杂动画应用中结合CSS3的变换将会显示其魅力之大！一般用于将过渡后的状态恢复原状！

给个网上的实例，有趣！

360扇形导航

**总结：**CSS3过渡transition在过渡动画效果方面确实不错，可以模拟简单的动画交互效果，简单总结属性以及相关知识！不过配合到CSS3的动画animation估计更添趣味！