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前端开发参考手册系列