CSS 3 过渡-transition

发布时间:2020-07-09 23:08:02 作者:Hello_Prudence
来源:网络 阅读:375

CSS 3 过渡

=====================================================================================

过渡---一个元素在不同状态之间进行平滑的转换,CSS 3 中使用transition属性实现过渡效果。


transition :过渡属性  执行时间  时间函数 延时时间;



时间函数---设置元素运动的速度

(1)贝塞尔曲线  cubic-bezier(p1(x,y),p2(x,y))

预定义贝塞尔曲线:

ease(默认值)

linear

ease-in

ease-out

ease-in-out

CSS 3 过渡-transition

CSS 3 过渡-transition

CSS 3 过渡-transition

(2) steps()

step-start  //步数为一

step-end


=======================================================================================================================================================================================

示例一:

img:hover{
    transform: translate(600px);
}
img{
    transition:2s cubic-bezier(0.6,0.1,0.1,0.7);
}


示例二:  

<style>
        div:hover img{
            transform:translate(300px);
        }
        .i01{
            transition:2s steps(3,start);
        }
        .i02{
            transition:2s steps(3,end);
        }
        .i03{
            transition:2s linear;
        }
    </style>
    <div>
        <img src="p_w_picpaths/caffe-1.jpg" alt="" class="i01"/><br/>
        <img src="p_w_picpaths/caffe-2.jpg" alt="" class="i02"/><br/>
        <img src="p_w_picpaths/caffe-3.jpg" alt="" class="i03"/>
    </div>


===========transition属性的每一步都可以用单独的属性表示

 

    transition: all 2s linear 3s;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 3s;


推荐阅读:
  1. CSS3 transition动画
  2. CSS3 过渡属性

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

transition ansi

上一篇:在CentOS 7上部署Ghost博客

下一篇:源码编译构建LAMP服务

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》