CSS3動態效果收集

CSS3能夠給頁面上的元素提供很多炫酷且有趣的效果。本篇博客就是記錄各種CSS3動態效果的實現，以備需要時查詢。當然，animate.css已經收集了足夠多的動畫效果，我們也可以積累屬於自己的其中沒有的一些動態效果，來增添網站的趣味性。

1、:hover背景色更改，文字小的動畫改變

代碼如下：

<a data-id="5" href="">HTML/CSS</a>

css代碼如下：

a{
	display: block;
	width: 100px;
	height: 30px;
	text-align: center;
	transition: background 0.6s;
	-moz-transition: background 0.6s;
	-webkit-transition: background 0.6s;
	-o-transition: background 0.6s;
	transition: color 0.3s;
	-moz-transition: color 0.3s;
	-webkit-transition: color 0.3s;
	text-decoration: none;
	line-height: 30px;
	text-align: center;
	font-size: 12px;
}
a:hover {
	background: #cc0000;
	color: #fff;
}

2、左右搖擺效果(鼠標hover上去的時候搖晃效果消失)：

div.shakeEl {
    animation: icon-jump 0.3s infinite;
    -o-animation: icon-jump 0.3s infinite;
    -moz-animation: icon-jump 0.3s infinite;
    -webkit-animation: icon-jump 0.3s infinite;
}

div.<span style="font-family: Arial, Helvetica, sans-serif;">shakeEl </span><span style="font-family: Arial, Helvetica, sans-serif;">{</span>
    animation: none;
    -o-animation: none;
    -moz-animation: none;
    -webkit-animation: none;
}

@keyframes icon-jump {
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-moz-keyframes icon-jump /* Firefox */
{
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-webkit-keyframes icon-jump /* Safari 和 Chrome */
{
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

@-o-keyframes icon-jump /* Opera */
{
    50% {
        -moz-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
    }
    100% {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
}

3.元素由小變大漸變效果：

HTML代碼：

<div class="test"></div>

CSS代碼：

.test{
	width:500px;
	background:red;
	height: 343px;
	-webkit-transition: all 1s ease .2s;
	-moz-transition: all 1s ease .2s;
	-o-transition: all 1s ease .2s;
	transition: all 1s ease .2s;
	
	-webkit-transform: scale(0.2,0.2) translate(0,0);
	-moz-transform: scale(0.2,0.2) translate(0,0);
	-o-transform: scale(0.2,0.2) translate(0,0);
	transform: scale(0.2,0.2) translate(0,0);
	opacity: 0;
	z-index: 3;
}

JS代碼：

setTimeout(function(){
		document.querySelector('.test').style.transform = 'scale(1,1) translate(0px,0px)';
		document.querySelector('.test').style.opacity = '1';
	},1000);