css3-animation动画
来源：互联网 发布：淘宝网商城女装春装 编辑：程序博客网 时间：2024/06/05 22:45
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
<title>动画效果</title>
</head>
<body>
<p id="bounce2" class="style bounce">animate.css</p><button id="bounce">点击</button><br/>
<p id="pulse2" class="style pulse">animate.css</p><button id="pulse">点击</button><br>
<p id="rubberband2" class="style rubberband">animate.css</p><button id="rubberband">点击</button><br>
<p id="swing2" class="style swing">animate.css</p><button id="swing">点击</button><br>
<p id="tada2" class="style tada">animate.css</p><button id="tada">点击</button><br>
<p id="wobble2" class="style wobble">animate.css</p><button id="wobble">点击</button><br>
<p id="bouncein2" class="style bouncein">animate.css</p><button id="bouncein">点击</button><br>
<p id="bouncedown2" class="style bouncedown">animate.css</p><button id="bouncedown">点击</button><br>
<p id="bounceout2" class="style bounceout">animate.css</p><button id="bounceout">点击</button><br>
<script src="js/animation.js"></script>
</body>
</html>
css：
body{text-align: center;}
.style{font-size: 50px; color: #67b404; display: inline-block; margin-top: 30px; }
button{width: 60px; height: 30px; border:0px; border-radius: 5px;background: #CCC;
margin-left:10px; cursor: pointer; color: #FFF; font-size: 20px;}
.bounce{animation:bounce 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:bounce 1s;}
.pulse{animation:pulse .7s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:pulse 1s;}
.rubberband{animation:rubberband 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:rubberband 1s;}
.swing{animation:swing 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:swing 1s;}
.tada{animation:tada 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:tada 1s;}
.wobble{animation:wobble 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:wobble 1s;}
@keyframes bounce{
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
-webkit-transform:translate3d(0, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
-webkit-transform:translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
-webkit-transform:translate3d(0,-4px,0);
}
}
@-webkit-keyframes bounce{
0%, 20%, 53%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
-webkit-transform:translate3d(0,0,0);
}
40%, 43% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
-webkit-transform:translate3d(0, -30px, 0);
}
70% {
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
-webkit-transform:translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
-webkit-transform:translate3d(0,-4px,0);
}
}
@keyframes pulse{
0% {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes pulse{
0% {
-webkit-transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}
@keyframes rubberband{
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, .95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes rubberband{
0% {
-webkit-transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes rubberband{
0% {
-webkit-transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, .95, 1);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}
@keyframes swing{
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
100% {
transform: rotate3d(0, 0, 1, 0deg);
}
}
@-webkit-keyframes swing{
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
}
100% {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes tada{
0% {
transform: scale3d(1, 1, 1);
}
10%, 20% {
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes tada{
0% {
-webkit-transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
}
}
@keyframes wobble{
0% {
transform: none;
}
15% {
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
100% {
transform: none;
}
}
@-webkit-keyframes wobble{
0% {
-webkit-transform: none;
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
100% {
-webkit-transform: none;
}
}
.bouncein{animation:bouncein 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:bouncein 1s;}
@keyframes bouncein{
0%, 20%, 40%, 60%, 80%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
100% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes bouncein{
0%, 20%, 40%, 60%, 80%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
}
}
.bouncedown{animation:bouncedown 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:bouncedown 1s;}
@keyframes bouncedown{
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0);
}
75% {
transform: translate3d(0, -10px, 0);
}
90% {
transform: translate3d(0, 5px, 0);
}
100% {
transform: none;
}
}
@-webkit-keyframes bouncedown{
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
}
}
.bounceout{animation:bounceout 1s;font-size: 50px; color: #67b404; display: inline-block;
margin-top: 30px;-webkit-animation:bounceout 1s;}
@keyframes bounceout{
20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
}
@-webkit-keyframes bounceout{
20% {
-webkit-transform: scale3d(.9, .9, .9);
}
50%, 55% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
}
100% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
}
}
js：
window.onload=function (){
var bounce=document.getElementById('bounce');
var bounce2=document.getElementById('bounce2');
var t=setTimeout(function(){
bounce2.className='style';
},1000);
bounce.addEventListener('click', function() {
bounce2.className='bounce';
var t=setTimeout(function(){
bounce2.className='style';
},1000);
});
var pulse=document.getElementById('pulse');
var pulse2=document.getElementById('pulse2');
var t=setTimeout(function(){
pulse2.className='style';
},1000);
pulse.addEventListener('click', function() {
pulse2.className='pulse';
var t=setTimeout(function(){
pulse2.className='style';
},1000);
});
var rubberband=document.getElementById('rubberband');
var rubberband2=document.getElementById('rubberband2');
var t=setTimeout(function(){
rubberband2.className='style';
},1000);
rubberband.addEventListener('click', function() {
rubberband2.className='rubberband';
var t=setTimeout(function(){
rubberband2.className='style';
},1000);
});
var swing=document.getElementById('swing');
var swing2=document.getElementById('swing2');
var t=setTimeout(function(){
swing2.className='style';
},1000);
swing.addEventListener('click', function() {
swing2.className='swing';
var t=setTimeout(function(){
swing2.className='style';
},1000);
});
var tada=document.getElementById('tada');
var tada2=document.getElementById('tada2');
var t=setTimeout(function(){
tada2.className='style';
},1000);
tada.addEventListener('click', function() {
tada2.className='tada';
var t=setTimeout(function(){
tada2.className='style';
},1000);
});
var wobble=document.getElementById('wobble');
var wobble2=document.getElementById('wobble2');
var t=setTimeout(function(){
wobble2.className='style';
},1000);
wobble.addEventListener('click', function() {
wobble2.className='wobble';
var t=setTimeout(function(){
wobble2.className='style';
},1000);
});
var bouncein=document.getElementById('bouncein');
var bouncein2=document.getElementById('bouncein2');
var t=setTimeout(function(){
bouncein2.className='style';
},1000);
bouncein.addEventListener('click', function() {
bouncein2.className='bouncein';
var t=setTimeout(function(){
bouncein2.className='style';
},1000);
});
var bouncedown=document.getElementById('bouncedown');
var bouncedown2=document.getElementById('bouncedown2');
var t=setTimeout(function(){
bouncedown2.className='style';
},1000);
bouncedown.addEventListener('click', function() {
bouncedown2.className='bouncedown';
var t=setTimeout(function(){
bouncedown2.className='style';
},1000);
});
var bounceout=document.getElementById('bounceout');
var bounceout2=document.getElementById('bounceout2');
var t=setTimeout(function(){
bounceout2.className='style';
},1000);
bounceout.addEventListener('click', function() {
bounceout2.className='bounceout';
var t=setTimeout(function(){
bounceout2.className='style';
},1000);
});
}
- CSS3 -webkit-animation(动画)
- CSS3 动画之animation
- CSS3之动画Animation
- css3的animation 动画
- css3 animation动画事件
- webkit-animation css3 动画
- CSS3动画 Animation
- css3 animation 动画应用
- CSS3----动画animation
- css3-animation动画
- css3的动画animation
- CSS3 Animation 帧动画
- CSS3 动画 Animation
- css3动画animation属性
- CSS3 Animation 动画
- css3动画-animation属性
- css3中的animation动画
- CSS3动画animation讲解
- Python学习笔记（二）
- JS获取当前页、上一页及域名
- stata随笔（1）
- [c++]抽象类
- 回溯法-n皇后
- css3-animation动画
- java 避免显示null 字符的
- Socket TCP Ping使用小结
- 从Excel中复制数据
- Eclipse使用技巧。
- httpclient 4.3.1 post get的工具类
- iOS自定义字体及类目
- JavaIo学习Properties
- sicily 1077.Cash Machine
