码迷,mamicode.com
首页 > 其他好文 > 详细

过渡 - transition

时间:2019-06-13 01:08:55      阅读:34      评论:0      收藏:0      [点我收藏+]

标签:tps   使用   css   实例   prope   变形   img   时间   UNC   

过渡 - transition 是变形transfrom其中一种效果,定义为一种状态过渡到另一种状态的过程,今天学习到css3动画,特此记录下过渡的使用和一些效果。

实例1:

    <div class="box"></div>
    <p>鼠标移动到 .box 元素上,查看过渡效果。</p>
.box{
        width: 100px;
        height: 100px;
        background: red;
        margin: 0 auto; 
        
        transition-duration: 1s;  /*花费时间*/
        transition-property: all; 
        transition-delay:0s; /* 延迟 */
        transition-timing-function: linear; /*匀速*/
    }
.box:hover{
        width:200px;
        background: #00FFFF;
    }

效果图:
技术图片
注:当指针移出元素时,它会逐渐变回原来的样式。

实例2:
在例子中使用所有过渡属性 - 使用简写

.box{
        .box{
            width: 100px;
            height: 100px;
            background: red;
            margin: 0 auto; 
            
            transition:1s all 0s linear;
        }

效果图还是这样:
技术图片
--------------------------------------------------
下面是我的简单总结

总:

transition:2s all;

transition:2s 1s all linear;

注:1s是延迟 linear过渡的属性

分开写:

1.transition:2s; 给它本身+这个过渡的属性:所需时间

2.transition-timing-function:linear; 匀速

5.transition: -delay timing-function -duration;

transition-timing-function 属性

描述
linear 匀速
ease 慢快慢
ease-in 慢开始
ease-out 慢结束
ease-in-out 慢开始和结束
  参考文章:

runoob

过渡 - transition

标签:tps   使用   css   实例   prope   变形   img   时间   UNC   

原文地址:https://www.cnblogs.com/anyw3c/p/transition.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!