css3过渡动画2d

过渡基础

<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}
div:hover{
    width:300px;
}
</style>
<body>
<div></div>
</body>
transition

属性是一个简写属性，用于设置四个过渡属性

  • transition-property 规定设置过渡效果的 CSS 属性的名称
    1. none 没有属性会获得过渡效果
    2. all 所有属性都将获得过渡效果
    3. property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
  • transition-duration 规定完成过渡效果需要多少秒或毫秒
    • time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果
  • transition-timing-function 规定速度效果的速度曲线
    1. linear 匀速（等于 cubic-bezier(0,0,1,1)）
    2. ease 缓动（cubic-bezier(0.25,0.1,0.25,1)）
    3. ease-in 加速（等于 cubic-bezier(0.42,0,1,1)）
    4. ease-out 减速（等于 cubic-bezier(0,0,0.58,1)）。
    5. ease-in-out 先加速后减速（等于 cubic-bezier(0.42,0,0.58,1)）
    6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
  • transition-delay 定义过渡效果何时开始简称延迟
    • time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计（1s=1000毫秒）
<style>
.box {
     margin-top: 60px;
     width: 100px;
     height: 50px;
     background: red;
     transition-duration: 10s;
}
.box:hover {
     width: 1000px;
}

div:nth-child(1) {
     transition-timing-function: ease;
}
div:nth-child(2) {
     transition-timing-function: ease-in;
}
div:nth-child(3) {
     transition-timing-function: ease-out;
}
div:nth-child(4) {
     transition-timing-function: ease-in-out;
}
div:nth-child(5) {
     transition-timing-function: linear;
}
</style>
<body>
<div class="box">ease</div>
<div class="box">ease-in</div>
<div class="box">ease-out</div>
<div class="box">ease-in-out</div>
<div class="box">linear</div>
</body>
兼容
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /*chrome safari*/
    -moz-transition: width 2s; /*ff*/
    -ms-transition: width 2s; /*ie*/
    -o-transition: width 2s; /*opera*/
    transition: width 2s; /*标准属性 一般新的版本浏览器*/
}
div:hover{
    width:300px;
}
</style>
<body>
<div></div>
</body>
posted @ 2020-10-20 10:38  qqaazzhf  阅读(74)  评论(0)    收藏  举报