JS動畫與CSS3動畫

時間 2019-11-20

標籤動畫 css3 css 欄目 JavaScript 简体版

原文原文鏈接

Js動畫

show / hide

var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒鐘內逐漸顯示
div.hide(3000); // 在3秒鐘內逐漸消失

slideUp / slideDown

垂直下拉，提早

div.slideUp(3000); // 在3秒鐘內逐漸向上消失
div.slideDown(3000); // 在3秒鐘內逐漸向下消失

fadeIn / fadeOut

淡入/淡出

div.fadeOut('slow'); // 在0.6秒內淡出
div.animate({ //在3秒內過渡到該狀態
    opacity: 0.25,
    width: '256px',
    height: '256px'
}, 3000, function () {
    console.log('動畫已結束');
    // 恢復至初始狀態:
    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

CSS3動畫

補間動畫

transition只能設定初始和結束時刻的兩個狀態,中間的過程經過自動計算去完成。javascript

transition 有四個子屬性：css

transition-property,須要變化的屬性：
transition-duration,在延續時間段，
transition-timing-function,變換的速率變化
transition-delay：變換延遲時間。

transition-property，能夠指定爲all，元素任何可過渡（transition）屬性值變化時都將執行過渡（transition）效果。也能夠指定爲特一變化的屬性。html

例如能夠設置不一樣的屬性，包括旋轉、扭曲、縮放、位移、矩陣、原點 transform-origin、過渡屬性 transition-property、過渡所需時間 transition-duration、過渡函數 transition-timing-function、過渡延遲時間 transition-delayjava

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <link rel="stylesheet" href="css/animation.css">
</head>
<body>
<section>
    <figure class="animation1">
        <img src="img/1.jpg" alt="1"/>
        <figcaption>
            <h1>圖片1</h1>
            <p>圖片介紹</p>
            <p>利用動畫延遲達到特效</p>
        </figcaption>
    </figure>
    <figure class="animation2">
        <img src="img/2.jpg" alt="2"/>
        <figcaption>
            <h1>圖片2</h1>
            <p>圖片介紹</p>
        </figcaption>
        <div class="reg"></div>
    </figure>
    <figure class="animation3">
        <img src="img/3.jpg" alt="3"/>
        <figcaption>
            <h1>圖片3</h1>
            <p>圖片介紹</p>
        </figcaption>
        <div class="reg"></div>
    </figure>
</section>
</body>
</html>

html,body,figure,figcaption,section,h1,div,p{
    margin:0;
}
.animation1{

}
figure{
    position: relative;
    width: 33.33%;
    overflow: hidden;
    float: left;
    height:300px;
}
figure img{
    width:100%;
    height:100%;
    background: #333;
    opacity:0.7;
}
figure figcaption{
    font-family: "Microsoft YaHei UI";
    transition: all 0.5s ease-in-out;
    color: #fff;
    position: absolute;
    top:10%;
    left:10%;
    width:80%;
    transform: translate(-250px,0);
}

figure:hover figcaption{
    transform: translate(0,0);
}
figure.animation1:hover img{
    opacity:0.8;
}
figure.animation1:hover figcaption p{
    transform: translate(0,0);
}
.animation1 figcaption h1{
    font-size: 16px;
    text-align: center;
    width:30%;
    background: #333;
    opacity:0.3;
}
.animation1 figcaption p{
    transition: all 0.4s ease-in-out;
    font-size: 12px;
    margin-top: 2%;
    text-align: center;
    width: 30%;
    background: #333;
    opacity: 0.3;
    transform: translate(-250px,0);
}
figure.animation1 figcaption p:nth-of-type(1){
     transition-delay: 0.15s;
 }
figure.animation1 figcaption p:nth-of-type(2){
    transition-delay: 0.3s;
}
figure.animation2 .reg{
    border: 2px solid azure;
    position: absolute;
    width:80%;
    height: 80%;
    top:10%;
    left:10%;
    transition: all 0.4s ease-in-out;
    transform:rotate(0deg) scale(0,0);
}
figure.animation2:hover .reg{
    transform:rotate(360deg) scale(1,1);
}
figure.animation2 figcaption{
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
}
figure.animation2 figcaption h1{
    transition: all 0.4s ease-in-out;
    transition-delay: 0.1s;
    transform: skew(90deg);
}
figure.animation2 figcaption p{
    transition: all 0.4s ease-in-out;
    transition-delay: 0.3s;
    transform: skew(90deg);
}
figure.animation2:hover figcaption h1{
    transform: skew(0deg);
}
figure.animation2:hover figcaption p{
    transform: skew(0deg);
}

figure.animation3 .reg{
    border: 2px solid azure;
    position: absolute;
    width:80%;
    height: 80%;
    top:10%;
    left:10%;
    transition: all 0.4s ease-in-out;
    transform:scale(0,0);
}
figure.animation3:hover .reg{
    transform:scale(1,1);
}
figure.animation3 figcaption{
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
}
figure.animation3 figcaption h1{
    transition: all 0.4s ease-in-out;
    transition-delay: 0.1s;
    transform: scale(0,0);
}
figure.animation3 figcaption p{
    transition: all 0.4s ease-in-out;
    transition-delay: 0.3s;
    transform: scale(0,0);
}
figure.animation3:hover figcaption h1{
    transform: scale(1,1);
}
figure.animation3:hover figcaption p{
    transform: scale(1,1);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。