1.CSS3常用属性 — transition 过渡效果

作者: codewhat | 来源:发表于2021-01-29 11:23 被阅读0次

1.CSS3常用属性 — transition 过渡效果
animation动画
动画
动画
CSS Transition
CSS3过渡动画
css 过渡/动画属性
HTML5&CSS3的CheckBox美化案例
CSS进阶七：transition，transform，anim
# 过渡模块transition

1.transition 过渡属性，这是简写的

值	描述
`transition-property`	设置过渡效果的 CSS 属性的名称。
`transition-duration`	完成过渡效果需要多少秒或毫秒。
`transition-timing-function`	速度效果的速度曲线。
`transition-delay`	过渡效果何时开始。

transition-property: none|all|property;

值	描述
`none`	没有属性会获得过渡效果。
`all`	所有属性都将获得过渡效果。
`property`	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

transition-duration: time;

值	描述
`time`	规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out;

值	描述
`linear`	匀速。
`ease`	慢速开始，然后变快，然后慢速结束。
`ease-in`	以慢速开始的过渡效果。
`ease-out`	以慢速结束的过渡效果。
`ease-in-out`	以慢速开始和结束的过渡效果。

transition-delay: time;

值	描述
`time`	规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。延迟

// test.html
<div></div>

// test.css
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* transition: 要过渡的属性 花费时间 运动曲线 何时开始 */
    transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
     /* transition: all .2s linear;  如果宽度和高度都需要过渡，则用all*/
    /*过渡效果写在div中，而不是hover中*/
}
div:hover { /* 鼠标经过盒子，宽度变600*/
    width: 600px;
    height: 300px;
}

案例1：鼠标经过盒子，盒子向上8px，同时增加盒子阴影

// test.html
<div class="lists clearfix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

// test.css
.item {
    float: left;
    width: 200px;
    height: 160px;
    background-color: #0078D7;
    padding: 20px 0;
    margin-left: 20px;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    transition: all .2s linear;
}
.item:hover {
    transform: translate3d(0,-8px,0);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
    z-index: 2;
}