标签：CSS3 动画 hover ease transition 过渡 检索

transition

　　css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

 

    transition-property  :  检索或设置对象中的参与对象的属性。

        all ( 默认值 ) , 指定 width , height;

 

    transition-duration  :  检索或设置参与过渡的时间。规定完成过渡效果需要多少秒或毫秒。

        需要添加单位：s (秒)  ms (毫秒)  1s == 1000ms

 

    transition-delay     :  检索或设置对象延迟或提前过渡的时间。定义过渡效果何时开始。（一般不写）

        2s : 延迟两秒进行过渡

        -2s : 提前两秒进行过渡

 

    transition-timing-function  :  检索或设置对象中过渡的动画类型。

        运动形式：加速、减速、匀速...

        linear  匀速

        ease（默认值）  逐渐慢下来

        ease-in     加速

        ease-out    减速

        ease-in-out 先加速后减速

        cubic-bezier()   贝塞尔曲线（ 贝塞尔曲线函数引用 https://cubic-bezier.com/ 网址）

 

    复合写法：

        transition:  all/具体属性值（可以不写，默认是所有） 2s/运动时间 linear/动画类型; 

 

        注意：当总时间与延迟时间同时存在的时候，就有顺序了，第一个是过度总时间，第二个是延迟时间。

 　　

　　注意：display:none;  text-aline:center;  不是具体属性值，因此不可以参与过渡。

 

        注意：让谁动加要把transition加给谁，不要把transition放到hover中，为了来回都有过渡。

 

    （1）加在hover之前，鼠标划入有动画，划出也有动画；

    （2）加在hover之后，鼠标划入有动画，划出没有动画；

    （3）可以hover之后和hover之后都加动画，可以加两种动画。

 

 　　　　　　　　 来自逆战班的 小白                         

 

 

标签：CSS3,动画,hover,ease,transition,过渡,检索
来源： https://www.cnblogs.com/hwy6/p/12349839.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。