Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Demo:實作捲動觸發CSS動畫

demo頁面

第一部分:使用CSS撰寫Slide In效果

這個單元使用的技巧有:

  1. 使用transition讓屬性值改變時有動畫的效果
  2. 使用animation-fill-mode設定結束狀態
  3. 使用transform:translate移動元素
1. 使用transition讓屬性值改變時有動畫的效果

transition 可以將CSS改變的過程變成動畫。詳細玩一下CSS3 Transitions就懂了。

2. 使用animation-fill-mode設定結束狀態

animation-fill-mode 結束後的狀態

  • none:默认值。不设置对象动画之外的状态
  • forwards:结束后保持动画结束时的状态,但当animation-direction为0,则动画不执行,持续保持动画开始时的状态
  • backwards:结束后返回动画开始时的状态
  • both:结束后可遵循forwards和backwards两个规则。
3. 使用transform:translate移動元素

使用transform: translate(x,y)來移動元素。其他常用的還有:

  • rotate(-20deg) 用來旋轉元素
  • scale(x,y) 等比例放大或縮小元素

可以到W3C Scholl玩玩看
CSS3 2D Transforms

程式碼(CSS部分)
@-webkit-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@-moz-keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
@keyframes fadeIn { from { opacity:0; } to {opacity: 1;} }
.animate{
    -moz-transition: 2s ease-in-out;
    -webkit-transition: 2s ease-in-out;
    transition: 2s ease-in-out;

    -moz-animation: fadeIn ease-in 1;
    -webkit-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;

    -webkit-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}
#phone.animate {
    -webkit-transform: translate(14em,0);
    -moz-transform: translate(14em,0);
    transform: translate(14em,0);
}

#monitor.animate {
    -webkit-transform: translate(3em,0);
    -moz-transform: translate(3em,0);
    transform: translate(3em,0);
}
程式碼(JS部分)

用簡單的addClass方法即可完成。

$(function () { 
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 300) {
             $('#monitor').addClass('animate');
             $('#phone').addClass('animate');
        };
        
            .
            .
            .
       
    });
});

第二部分:使用CSS讓圖片永久旋轉

keyframe:用來編寫這個動畫的過程。設定好旋轉的動作命名為rotaRadial。

 @-webkit-keyframes rotateRadial {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
 }

 @keyframes rotateRadial {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
 }

設定幾個參數來達到我們要的效果:

  1. 動畫名稱指定剛剛創造的keyframe名稱rotateRadial
  2. 完成一次動畫的時間設為10s秒。
  3. 永不停止。animation-iteration-count: infinite;
  4. 將動畫轉變的加速曲線設為線性。animation-timing-function: linear;
.always-rotate{
    -webkit-animation-name: rotateRadial;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    animation-name: rotateRadial;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

第三部分:讓圖片變大

原本圖片的大小,設成0。

.anim-img{
    position: absolute;
    left: 0;
    opacity: 0;
}

後來圖片的大小

img.grow-img{
    width: 200px;
    height: 200px;
}

.animate設定了transition,因此會有動畫效果。

$(function () { 
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 300) {
            $('#monitor').addClass('animate');
            $('#phone').addClass('animate');
        };
            
            
        if(y > 400){
          $('#support').find('img').addClass('animate grow-img');
          $('#speed').find('img').addClass('animate grow-img');
          $('#smart').find('img').addClass('animate grow-img');
        };
       
    });
});

參考連結

大量範例展示CSS動畫可以做到的效果。

Transitions & Animations - Learn to Code Advanced HTML & CSS

MDN 的 CSS 動畫說明頁,有不少的範例可以玩。

CSS 動畫 | MDN

中文版的CSS字典

CSS参考手册_web前端开发参考手册系列