CSS3 动画实现方法大全
常用效果总结（需要引用animate.css）
<!doctype html>
<html lang="en"> <head>
<meta charset="UTF-8" />
<title>CSS3动画实现方式大全</title>
<script src="jquery-2.1.0.min.js"></script>
<style type="text/css">
.left {
width: 300px;
color: white;
background: #;
} .left ul {
list-style: none;
} .left a {
color: white;
} #right {
position: fixed;
top: 100px;
right: %;
width: 300px;
height: 200px;
margin: 100px auto;
background: url(http://www.100sucai.com/img/demo/1373.png)
}
/*******************1、闪光灯***********************/ .animation1 {
-webkit-animation: flash 1s .2s ease both;
-moz-animation: flash 1s .2s ease both;
} @-webkit-keyframes flash {
%,
%,
% {
opacity: ;
}
%,
% {
opacity: ;
}
} @-moz-keyframes flash {
%,
%,
% {
opacity: ;
}
%,
% {
opacity: ;
}
}
/*******************2、弹起***********************/ .animation2 {
-webkit-animation: bounce 1s .2s ease both;
-moz-animation: bounce 1s .2s ease both;
} @-webkit-keyframes bounce {
%,
%,
%,
%,
% {
-webkit-transform: translateY()
}
% {
-webkit-transform: translateY(-30px)
}
% {
-webkit-transform: translateY(-15px)
}
} @-moz-keyframes bounce {
%,
%,
%,
%,
% {
-moz-transform: translateY()
}
% {
-moz-transform: translateY(-30px)
}
% {
-moz-transform: translateY(-15px)
}
}
/*******************3、摇摆***********************/ .animation3 {
-webkit-animation: shake 1s .2s ease both;
-moz-animation: shake 1s .2s ease both;
} @-webkit-keyframes shake {
%,
% {
-webkit-transform: translateX();
}
%,
%,
%,
%,
% {
-webkit-transform: translateX(-10px);
}
%,
%,
%,
% {
-webkit-transform: translateX(10px);
}
} @-moz-keyframes shake {
%,
% {
-moz-transform: translateX();
}
%,
%,
%,
%,
% {
-moz-transform: translateX(-10px);
}
%,
%,
%,
% {
-moz-transform: translateX(10px);
}
}
/*******************4、秋千***********************/ .animation4 {
-webkit-animation: tada 1s .2s ease both;
-moz-animation: tada 1s .2s ease both;
} @-webkit-keyframes tada {
% {
-webkit-transform: scale()
}
%,
% {
-webkit-transform: scale(0.9) rotate(-3deg)
}
%,
%,
%,
% {
-webkit-transform: scale(1.1) rotate(3deg)
}
%,
%,
% {
-webkit-transform: scale(1.1) rotate(-3deg)
}
% {
-webkit-transform: scale() rotate()
}
} @-moz-keyframes tada {
% {
-moz-transform: scale()
}
%,
% {
-moz-transform: scale(0.9) rotate(-3deg)
}
%,
%,
%,
% {
-moz-transform: scale(1.1) rotate(3deg)
}
%,
%,
% {
-moz-transform: scale(1.1) rotate(-3deg)
}
% {
-moz-transform: scale() rotate()
}
}
/*******************5、swing***********************/ .animation5 {
-webkit-animation: swing 1s .2s ease both;
-moz-animation: swing 1s .2s ease both;
} @-webkit-keyframes swing {
%,
%,
%,
%,
% {
-webkit-transform-origin: top center
}
% {
-webkit-transform: rotate(15deg)
}
% {
-webkit-transform: rotate(-10deg)
}
% {
-webkit-transform: rotate(5deg)
}
% {
-webkit-transform: rotate(-5deg)
}
% {
-webkit-transform: rotate(0deg)
}
} @-moz-keyframes swing {
%,
%,
%,
%,
% {
-moz-transform-origin: top center
}
% {
-moz-transform: rotate(15deg)
}
% {
-moz-transform: rotate(-10deg)
}
% {
-moz-transform: rotate(5deg)
}
% {
-moz-transform: rotate(-5deg)
}
% {
-moz-transform: rotate(0deg)
}
}
/*******************6、疯狂摆动***********************/ .animation6 {
-webkit-animation: wobble 1s .2s ease both;
-moz-animation: wobble 1s .2s ease both;
} @-webkit-keyframes wobble {
% {
-webkit-transform: translateX(%)
}
% {
-webkit-transform: translateX(-%) rotate(-5deg)
}
% {
-webkit-transform: translateX(%) rotate(3deg)
}
% {
-webkit-transform: translateX(-%) rotate(-3deg)
}
% {
-webkit-transform: translateX(%) rotate(2deg)
}
% {
-webkit-transform: translateX(-%) rotate(-1deg)
}
% {
-webkit-transform: translateX(%)
}
} @-moz-keyframes wobble {
% {
-moz-transform: translateX(%)
}
% {
-moz-transform: translateX(-%) rotate(-5deg)
}
% {
-moz-transform: translateX(%) rotate(3deg)
}
% {
-moz-transform: translateX(-%) rotate(-3deg)
}
% {
-moz-transform: translateX(%) rotate(2deg)
}
% {
-moz-transform: translateX(-%) rotate(-1deg)
}
% {
-moz-transform: translateX(%)
}
}
/*******************7、脉冲***********************/ .animation7 {
-webkit-animation: pulse 1s .2s ease both;
-moz-animation: pulse 1s .2s ease both;
} @-webkit-keyframes pulse {
% {
-webkit-transform: scale()
}
% {
-webkit-transform: scale(1.1)
}
% {
-webkit-transform: scale()
}
} @-moz-keyframes pulse {
% {
-moz-transform: scale()
}
% {
-moz-transform: scale(1.1)
}
% {
-moz-transform: scale()
}
}
/*******************8、翻转***********************/ .animation8 {
-webkit-animation: flip 1s .2s ease both;
-moz-animation: flip 1s .2s ease both;
} @-webkit-keyframes flip {
% {
-webkit-transform: perspective(400px) rotateY();
-webkit-animation-timing-function: ease-out
}
% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out
}
% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale();
-webkit-animation-timing-function: ease-in
}
% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(.);
-webkit-animation-timing-function: ease-in
}
% {
-webkit-transform: perspective(400px) scale();
-webkit-animation-timing-function: ease-in
}
} @-moz-keyframes flip {
% {
-moz-transform: perspective(400px) rotateY();
-moz-animation-timing-function: ease-out
}
% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
-moz-animation-timing-function: ease-out
}
% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale();
-moz-animation-timing-function: ease-in
}
% {
-moz-transform: perspective(400px) rotateY(360deg) scale(.);
-moz-animation-timing-function: ease-in
}
% {
-moz-transform: perspective(400px) scale();
-moz-animation-timing-function: ease-in
}
}
/*******************9、X轴淡入***********************/ .animation9 {
-webkit-animation: flipInX 1s .2s ease both;
-moz-animation: flipInX 1s .2s ease both;
} @-webkit-keyframes flipInX {
% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity:
}
% {
-webkit-transform: perspective(400px) rotateX(-10deg)
}
% {
-webkit-transform: perspective(400px) rotateX(10deg)
}
% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity:
}
} @-moz-keyframes flipInX {
% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity:
}
% {
-moz-transform: perspective(400px) rotateX(-10deg)
}
% {
-moz-transform: perspective(400px) rotateX(10deg)
}
% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity:
}
}
/*******************10、X轴淡出***********************/ .animation10 {
-webkit-animation: flipOutX 1s .2s ease both;
-moz-animation: flipOutX 1s .2s ease both;
} @-webkit-keyframes flipOutX {
% {
-webkit-transform: perspective(400px) rotateX(0deg);
opacity:
}
% {
-webkit-transform: perspective(400px) rotateX(90deg);
opacity:
}
} @-moz-keyframes flipOutX {
% {
-moz-transform: perspective(400px) rotateX(0deg);
opacity:
}
% {
-moz-transform: perspective(400px) rotateX(90deg);
opacity:
}
}
/*******************11、Y轴淡入***********************/ .animation11 {
-webkit-animation: flipInY 1s .2s ease both;
-moz-animation: flipInY 1s .2s ease both;
} @-webkit-keyframes flipInY {
% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity:
}
% {
-webkit-transform: perspective(400px) rotateY(-10deg)
}
% {
-webkit-transform: perspective(400px) rotateY(10deg)
}
% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity:
}
} @-moz-keyframes flipInY {
% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity:
}
% {
-moz-transform: perspective(400px) rotateY(-10deg)
}
% {
-moz-transform: perspective(400px) rotateY(10deg)
}
% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity:
}
}
/*******************12、Y轴淡出***********************/ .animation12 {
-webkit-animation: flipOutY 1s .2s ease both;
-moz-animation: flipOutY 1s .2s ease both;
} @-webkit-keyframes flipOutY {
% {
-webkit-transform: perspective(400px) rotateY(0deg);
opacity:
}
% {
-webkit-transform: perspective(400px) rotateY(90deg);
opacity:
}
} @-moz-keyframes flipOutY {
% {
-moz-transform: perspective(400px) rotateY(0deg);
opacity:
}
% {
-moz-transform: perspective(400px) rotateY(90deg);
opacity:
}
}
/*******************13、下方淡入***********************/ .animation13 {
-webkit-animation: fadeInUp 1s .2s ease both;
-moz-animation: fadeInUp 1s .2s ease both;
} @-webkit-keyframes fadeInUp {
% {
opacity: ;
-webkit-transform: translateY(20px)
}
% {
opacity: ;
-webkit-transform: translateY()
}
} @-moz-keyframes fadeInUp {
% {
opacity: ;
-moz-transform: translateY(20px)
}
% {
opacity: ;
-moz-transform: translateY()
}
}
/*******************14、上方淡入***********************/ .animation14 {
-webkit-animation: fadeInDown 1s .2s ease both;
-moz-animation: fadeInDown 1s .2s ease both;
} @-webkit-keyframes fadeInDown {
% {
opacity: ;
-webkit-transform: translateY(-20px)
}
% {
opacity: ;
-webkit-transform: translateY()
}
} @-moz-keyframes fadeInDown {
% {
opacity: ;
-moz-transform: translateY(-20px)
}
% {
opacity: ;
-moz-transform: translateY()
}
}
/*******************15、左边淡入***********************/ .animation15 {
-webkit-animation: fadeInLeft 1s .2s ease both;
-moz-animation: fadeInLeft 1s .2s ease both;
} @-webkit-keyframes fadeInLeft {
% {
opacity: ;
-webkit-transform: translateX(-20px)
}
% {
opacity: ;
-webkit-transform: translateX()
}
} @-moz-keyframes fadeInLeft {
% {
opacity: ;
-moz-transform: translateX(-20px)
}
% {
opacity: ;
-moz-transform: translateX()
}
}
/*******************16、右边淡入***********************/ .animation16 {
-webkit-animation: fadeInRight 1s .2s ease both;
-moz-animation: fadeInRight 1s .2s ease both;
} @-webkit-keyframes fadeInRight {
% {
opacity: ;
-webkit-transform: translateX(20px)
}
% {
opacity: ;
-webkit-transform: translateX()
}
} @-moz-keyframes fadeInRight {
% {
opacity: ;
-moz-transform: translateX(20px)
}
% {
opacity: ;
-moz-transform: translateX()
}
}
/*******************17、底部淡入***********************/ .animation17 {
-webkit-animation: fadeInUpBig 1s .2s ease both;
-moz-animation: fadeInUpBig 1s .2s ease both;
} @-webkit-keyframes fadeInUpBig {
% {
opacity: ;
-webkit-transform: translateY(2000px)
}
% {
opacity: ;
-webkit-transform: translateY()
}
} @-moz-keyframes fadeInUpBig {
% {
opacity: ;
-moz-transform: translateY(2000px)
}
% {
opacity: ;
-moz-transform: translateY()
}
}
/*******************18、顶部淡入***********************/ .animation18 {
-webkit-animation: fadeInDownBig 1s .2s ease both;
-moz-animation: fadeInDownBig 1s .2s ease both;
} @-webkit-keyframes fadeInDownBig {
% {
opacity: ;
-webkit-transform: translateY(-2000px)
}
% {
opacity: ;
-webkit-transform: translateY()
}
} @-moz-keyframes fadeInDownBig {
% {
opacity: ;
-moz-transform: translateY(-2000px)
}
% {
opacity: ;
-moz-transform: translateY()
}
}
/*******************19、页面左边淡入***********************/ .animation19 {
-webkit-animation: fadeInLeftBig 1s .2s ease both;
-moz-animation: fadeInLeftBig 1s .2s ease both;
} @-webkit-keyframes fadeInLeftBig {
% {
opacity: ;
-webkit-transform: translateX(-2000px)
}
% {
opacity: ;
-webkit-transform: translateX()
}
} @-moz-keyframes fadeInLeftBig {
% {
opacity: ;
-moz-transform: translateX(-2000px)
}
% {
opacity: ;
-moz-transform: translateX()
}
}
/*******************20、页面右边淡入***********************/ .animation20 {
-webkit-animation: fadeInRightBig 1s .2s ease both;
-moz-animation: fadeInRightBig 1s .2s ease both;
} @-webkit-keyframes fadeInRightBig {
% {
opacity: ;
-webkit-transform: translateX(2000px)
}
% {
opacity: ;
-webkit-transform: translateX()
}
} @-moz-keyframes fadeInRightBig {
% {
opacity: ;
-moz-transform: translateX(2000px)
}
% {
opacity: ;
-moz-transform: translateX()
}
}
/*******************21、向上淡出***********************/ .animation21 {
-webkit-animation: fadeOutUp 1s .2s ease both;
-moz-animation: fadeOutUp 1s .2s ease both;
} @-webkit-keyframes fadeOutUp {
% {
opacity: ;
-webkit-transform: translateY()
}
% {
opacity: ;
-webkit-transform: translateY(-20px)
}
} @-moz-keyframes fadeOutUp {
% {
opacity: ;
-moz-transform: translateY()
}
% {
opacity: ;
-moz-transform: translateY(-20px)
}
}
/*******************22、向下淡出***********************/ .animation22 {
-webkit-animation: fadeOutDown 1s .2s ease both;
-moz-animation: fadeOutDown 1s .2s ease both;
} @-webkit-keyframes fadeOutDown {
% {
opacity: ;
-webkit-transform: translateY()
}
% {
opacity: ;
-webkit-transform: translateY(20px)
}
} @-moz-keyframes fadeOutDown {
% {
opacity: ;
-moz-transform: translateY()
}
% {
opacity: ;
-moz-transform: translateY(20px)
}
}
/*******************23、向左淡出***********************/ .animation23 {
-webkit-animation: fadeOutLeft 1s .2s ease both;
-moz-animation: fadeOutLeft 1s .2s ease both;
} @-webkit-keyframes fadeOutLeft {
% {
opacity: ;
-webkit-transform: translateX()
}
% {
opacity: ;
-webkit-transform: translateX(-20px)
}
} @-moz-keyframes fadeOutLeft {
% {
opacity: ;
-moz-transform: translateX()
}
% {
opacity: ;
-moz-transform: translateX(-20px)
}
}
/*******************24、向右淡出***********************/ .animation24 {
-webkit-animation: fadeOutRight 1s .2s ease both;
-moz-animation: fadeOutRight 1s .2s ease both;
} @-webkit-keyframes fadeOutRight {
% {
opacity: ;
-webkit-transform: translateX()
}
% {
opacity: ;
-webkit-transform: translateX(20px)
}
} @-moz-keyframes fadeOutRight {
% {
opacity: ;
-moz-transform: translateX()
}
% {
opacity: ;
-moz-transform: translateX(20px)
}
}
/*******************25、顶部淡出***********************/ .animation25 {
-webkit-animation: fadeOutTopBig 1s .2s ease both;
-moz-animation: fadeOutTopBig 1s .2s ease both;
} @-webkit-keyframes fadeOutTopBig {
% {
opacity: ;
-webkit-transform: translateY()
}
% {
opacity: ;
-webkit-transform: translateY(-2000px)
}
} @-moz-keyframes fadeOutTopBig {
% {
opacity: ;
-moz-transform: translateY()
}
% {
opacity: ;
-moz-transform: translateY(-2000px)
}
}
/*******************26、底部淡出***********************/ .animation26 {
-webkit-animation: fadeOutUpBig 1s .2s ease both;
-moz-animation: fadeOutUpBig 1s .2s ease both;
} @-webkit-keyframes fadeOutUpBig {
% {
opacity: ;
-webkit-transform: translateY()
}
% {
opacity: ;
-webkit-transform: translateY(2000px)
}
} @-moz-keyframes fadeOutUpBig {
% {
opacity: ;
-moz-transform: translateY()
}
% {
opacity: ;
-moz-transform: translateY(-2000px)
}
}
/*******************27、页面左边淡出***********************/ .animation27 {
-webkit-animation: fadeOutLeftBig 1s .2s ease both;
-moz-animation: fadeOutLeftBig 1s .2s ease both;
} @-webkit-keyframes fadeOutLeftBig {
% {
opacity: ;
-webkit-transform: translateX()
}
% {
opacity: ;
-webkit-transform: translateX(-2000px)
}
} @-moz-keyframes fadeOutLeftBig {
% {
opacity: ;
-moz-transform: translateX()
}
% {
opacity: ;
-moz-transform: translateX(-2000px)
}
}
/*******************28、页面右边淡出***********************/ .animation28 {
-webkit-animation: fadeOutRightBig 1s .2s ease both;
-moz-animation: fadeOutRightBig 1s .2s ease both;
} @-webkit-keyframes fadeOutRightBig {
% {
opacity: ;
-webkit-transform: translateX()
}
% {
opacity: ;
-webkit-transform: translateX(2000px)
}
} @-moz-keyframes fadeOutRightBig {
% {
opacity: ;
-moz-transform: translateX()
}
% {
opacity: ;
-moz-transform: translateX(2000px)
}
}
/*******************29、bounceIn***********************/ .animation29 {
-webkit-animation: bounceIn 1s .2s ease both;
-moz-animation: bounceIn 1s .2s ease both;
} @-webkit-keyframes bounceIn {
% {
opacity: ;
-webkit-transform: scale(.)
}
% {
opacity: ;
-webkit-transform: scale(1.05)
}
% {
-webkit-transform: scale(.)
}
% {
-webkit-transform: scale()
}
} @-moz-keyframes bounceIn {
% {
opacity: ;
-moz-transform: scale(.)
}
% {
opacity: ;
-moz-transform: scale(1.05)
}
% {
-moz-transform: scale(.)
}
% {
-moz-transform: scale()
}
}
/*******************30、bounceInDown***********************/ .animation30 {
-webkit-animation: bounceInDown 1s .2s ease both;
-moz-animation: bounceInDown 1s .2s ease both;
} @-webkit-keyframes bounceInDown {
% {
opacity: ;
-webkit-transform: translateY(-2000px)
}
% {
opacity: ;
-webkit-transform: translateY(30px)
}
% {
-webkit-transform: translateY(-10px)
}
% {
-webkit-transform: translateY()
}
} @-moz-keyframes bounceInDown {
% {
opacity: ;
-moz-transform: translateY(-2000px)
}
% {
opacity: ;
-moz-transform: translateY(30px)
}
% {
-moz-transform: translateY(-10px)
}
% {
-moz-transform: translateY()
}
}
/*******************31、bounceInUp***********************/ .animation31 {
-webkit-animation: bounceInUp 1s .2s ease both;
-moz-animation: bounceInUp 1s .2s ease both;
} @-webkit-keyframes bounceInUp {
% {
opacity: ;
-webkit-transform: translateY(2000px)
}
% {
opacity: ;
-webkit-transform: translateY(-30px)
}
% {
-webkit-transform: translateY(10px)
}
% {
-webkit-transform: translateY()
}
} @-moz-keyframes bounceInUp {
% {
opacity: ;
-moz-transform: translateY(2000px)
}
% {
opacity: ;
-moz-transform: translateY(-30px)
}
% {
-moz-transform: translateY(10px)
}
% {
-moz-transform: translateY()
}
}
/*******************32、bounceInLeft***********************/ .animation32 {
-webkit-animation: bounceInLeft 1s .2s ease both;
-moz-animation: bounceInLeft 1s .2s ease both;
} @-webkit-keyframes bounceInLeft {
% {
opacity: ;
-webkit-transform: translateX(-2000px)
}
% {
opacity: ;
-webkit-transform: translateX(30px)
}
% {
-webkit-transform: translateX(-10px)
}
% {
-webkit-transform: translateX()
}
} @-moz-keyframes bounceInLeft {
% {
opacity: ;
-moz-transform: translateX(-2000px)
}
% {
opacity: ;
-moz-transform: translateX(30px)
}
% {
-moz-transform: translateX(-10px)
}
% {
-moz-transform: translateX()
}
}
/*******************33、bounceInRight***********************/ .animation33 {
-webkit-animation: bounceInRight 1s .2s ease both;
-moz-animation: bounceInRight 1s .2s ease both;
} @-webkit-keyframes bounceInRight {
% {
opacity: ;
-webkit-transform: translateX(2000px)
}
% {
opacity: ;
-webkit-transform: translateX(-30px)
}
% {
-webkit-transform: translateX(10px)
}
% {
-webkit-transform: translateX()
}
} @-moz-keyframes bounceInRight {
% {
opacity: ;
-moz-transform: translateX(2000px)
}
% {
opacity: ;
-moz-transform: translateX(-30px)
}
% {
-moz-transform: translateX(10px)
}
% {
-moz-transform: translateX()
}
}
/*******************34、bounceOut***********************/ .animation34 {
-webkit-animation: bounceOut 1s .2s ease both;
-moz-animation: bounceOut 1s .2s ease both;
} @-webkit-keyframes bounceOut {
% {
-webkit-transform: scale()
}
% {
-webkit-transform: scale(.)
}
% {
opacity: ;
-webkit-transform: scale(1.1)
}
% {
opacity: ;
-webkit-transform: scale(.)
}
} @-moz-keyframes bounceOut {
% {
-moz-transform: scale()
}
% {
-moz-transform: scale(.)
}
% {
opacity: ;
-moz-transform: scale(1.1)
}
% {
opacity: ;
-moz-transform: scale(.)
}
}
/*******************35、bounceOutDown***********************/ .animation35 {
-webkit-animation: bounceOutDown 1s .2s ease both;
-moz-animation: bounceOutDown 1s .2s ease both;
} @-webkit-keyframes bounceOutDown {
% {
-webkit-transform: translateY()
}
% {
opacity: ;
-webkit-transform: translateY(-20px)
}
% {
opacity: ;
-webkit-transform: translateY(2000px)
}
} @-moz-keyframes bounceOutDown {
% {
-moz-transform: translateY()
}
% {
opacity: ;
-moz-transform: translateY(-20px)
}
% {
opacity: ;
-moz-transform: translateY(2000px)
}
}
/*******************36、bounceOutUp***********************/ .animation36 {
-webkit-animation: bounceOutUp 1s .2s ease both;
-moz-animation: bounceOutUp 1s .2s ease both;
} @-webkit-keyframes bounceOutUp {
% {
-webkit-transform: translateY()
}
% {
opacity: ;
-webkit-transform: translateY(20px)
}
% {
opacity: ;
-webkit-transform: translateY(-2000px)
}
} @-moz-keyframes bounceOutUp {
% {
-moz-transform: translateY()
}
% {
opacity: ;
-moz-transform: translateY(20px)
}
% {
opacity: ;
-moz-transform: translateY(-2000px)
}
}
/*******************37、bounceOutLeft***********************/ .animation37 {
-webkit-animation: bounceInLeft 1s .2s ease both;
-moz-animation: bounceInLeft 1s .2s ease both;
} @-webkit-keyframes bounceInLeft {
% {
opacity: ;
-webkit-transform: translateX(-2000px)
}
% {
opacity: ;
-webkit-transform: translateX(30px)
}
% {
-webkit-transform: translateX(-10px)
}
% {
-webkit-transform: translateX()
}
} @-moz-keyframes bounceInLeft {
% {
opacity: ;
-moz-transform: translateX(-2000px)
}
% {
opacity: ;
-moz-transform: translateX(30px)
}
% {
-moz-transform: translateX(-10px)
}
% {
-moz-transform: translateX()
}
}
/*******************38、bounceOutRight***********************/ .animation38 {
-webkit-animation: bounceInRight 1s .2s ease both;
-moz-animation: bounceInRight 1s .2s ease both;
} @-webkit-keyframes bounceInRight {
% {
opacity: ;
-webkit-transform: translateX(2000px)
}
% {
opacity: ;
-webkit-transform: translateX(-30px)
}
% {
-webkit-transform: translateX(10px)
}
% {
-webkit-transform: translateX()
}
} @-moz-keyframes bounceInRight {
% {
opacity: ;
-moz-transform: translateX(2000px)
}
% {
opacity: ;
-moz-transform: translateX(-30px)
}
% {
-moz-transform: translateX(10px)
}
% {
-moz-transform: translateX()
}
}
/*******************39、rotateIn***********************/ .animation39 {
-webkit-animation: rotateIn 1s .2s ease both;
-moz-animation: rotateIn 1s .2s ease both;
} @-webkit-keyframes rotateIn {
% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity:
}
% {
-webkit-transform-origin: center center;
-webkit-transform: rotate();
opacity:
}
} @-moz-keyframes rotateIn {
% {
-moz-transform-origin: center center;
-moz-transform: rotate(-200deg);
opacity:
}
% {
-moz-transform-origin: center center;
-moz-transform: rotate();
opacity:
}
}
/*******************40、rotateInDownLeft***********************/ .animation40 {
-webkit-animation: rotateInDownLeft 1s .2s ease both;
-moz-animation: rotateInDownLeft 1s .2s ease both;
} @-webkit-keyframes rotateInDownLeft {
% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity:
}
% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate();
opacity:
}
} @-moz-keyframes rotateInDownLeft {
% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity:
}
% {
-moz-transform-origin: left bottom;
-moz-transform: rotate();
opacity:
}
}
/*******************41、rotateInDownRight***********************/ .animation41 {
-webkit-animation: rotateInDownRight 1s .2s ease both;
-moz-animation: rotateInDownRight 1s .2s ease both;
} @-webkit-keyframes rotateInDownRight {
% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity:
}
% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate();
opacity:
}
} @-moz-keyframes rotateInDownRight {
% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity:
}
% {
-moz-transform-origin: right bottom;
-moz-transform: rotate();
opacity:
}
}
/*******************42、rotateInUpLeft***********************/ .animation42 {
-webkit-animation: rotateInUpLeft 1s .2s ease both;
-moz-animation: rotateInUpLeft 1s .2s ease both;
} @-webkit-keyframes rotateInUpLeft {
% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(90deg);
opacity:
}
% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate();
opacity:
}
} @-moz-keyframes rotateInUpLeft {
% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(90deg);
opacity:
}
% {
-moz-transform-origin: left bottom;
-moz-transform: rotate();
opacity:
}
}
/*******************43、rotateInUpRight***********************/ .animation43 {
-webkit-animation: rotateInUpRight 1s .2s ease both;
-moz-animation: rotateInUpRight 1s .2s ease both;
} @-webkit-keyframes rotateInUpRight {
% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity:
}
% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate();
opacity:
}
} @-moz-keyframes rotateInUpRight {
% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity:
}
% {
-moz-transform-origin: right bottom;
-moz-transform: rotate();
opacity:
}
}
/*******************44、rotateOut***********************/ .animation44 {
-webkit-animation: rotateOut 1s .2s ease both;
-moz-animation: rotateOut 1s .2s ease both;
} @-webkit-keyframes rotateOut {
% {
-webkit-transform: rotate();
opacity:
}
% {
-webkit-transform: rotate(-90deg);
opacity:
}
} @-moz-keyframes rotateOut {
% {
-moz-transform: rotate();
opacity:
}
% {
-moz-transform: rotate(-90deg);
opacity:
}
}
/*******************45、rotateOutDownLeft***********************/ .animation45 {
-webkit-animation: rotateOutDownLeft 1s .2s ease both;
-moz-animation: rotateOutDownLeft 1s .2s ease both;
} @-webkit-keyframes rotateOutDownLeft {
% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate();
opacity:
}
% {
-webkit-transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
opacity:
}
} @-moz-keyframes rotateOutDownLeft {
% {
-moz-transform-origin: left bottom;
-moz-transform: rotate();
opacity:
}
% {
-moz-transform-origin: left bottom;
-moz-transform: rotate(-90deg);
opacity:
}
}
/*******************46、rotateOutDownRight***********************/ .animation46 {
-webkit-animation: rotateOutDownRight 1s .2s ease both;
-moz-animation: rotateOutDownRight 1s .2s ease both;
} @-webkit-keyframes rotateOutDownRight {
% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate();
opacity:
}
% {
-webkit-transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
opacity:
}
} @-moz-keyframes rotateOutDownRight {
% {
-moz-transform-origin: right bottom;
-moz-transform: rotate();
opacity:
}
% {
-moz-transform-origin: right bottom;
-moz-transform: rotate(-90deg);
opacity:
}
}
/*******************47、rotateOutUpLeft***********************/ .animation47 {
-webkit-animation: rotateOutUpLeft 1s .2s ease both;
-moz-animation: rotateOutUpLeft 1s .2s ease both;
} @-webkit-keyframes rotateOutUpLeft {
% {
-webkit-transform-origin: left top;
-webkit-transform: rotate();
opacity:
}
% {
-webkit-transform-origin: left top;
-webkit-transform: rotate(-90deg);
opacity:
}
} @-moz-keyframes rotateOutUpLeft {
% {
-moz-transform-origin: left top;
-moz-transform: rotate();
opacity:
}
% {
-moz-transform-origin: left top;
-moz-transform: rotate(-90deg);
opacity:
}
}
/*******************48、rotateOutUpRight***********************/ .animation48 {
-webkit-animation: rotateOutUpRight 1s .2s ease both;
-moz-animation: rotateOutUpRight 1s .2s ease both;
} @-webkit-keyframes rotateOutUpRight {
% {
-webkit-transform-origin: right top;
-webkit-transform: rotate();
opacity:
}
% {
-webkit-transform-origin: right top;
-webkit-transform: rotate(-90deg);
opacity:
}
} @-moz-keyframes rotateOutUpRight {
% {
-moz-transform-origin: right top;
-moz-transform: rotate();
opacity:
}
% {
-moz-transform-origin: right top;
-moz-transform: rotate(-90deg);
opacity:
}
}
/*******************49、hinge***********************/ .animation49 {
-webkit-animation: hinge 1s .2s ease both;
-moz-animation: hinge 1s .2s ease both;
} @-webkit-keyframes hinge {
% {
-webkit-transform: rotate();
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
%,
% {
-webkit-transform: rotate(80deg);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
% {
-webkit-transform: rotate(60deg);
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
% {
-webkit-transform: rotate(60deg) translateY();
opacity: ;
-webkit-transform-origin: top left;
-webkit-animation-timing-function: ease-in-out
}
% {
-webkit-transform: translateY(700px);
opacity:
}
} @-moz-keyframes hinge {
% {
-moz-transform: rotate();
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
%,
% {
-moz-transform: rotate(80deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
% {
-moz-transform: rotate(60deg);
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
% {
-moz-transform: rotate(60deg) translateY();
opacity: ;
-moz-transform-origin: top left;
-moz-animation-timing-function: ease-in-out
}
% {
-moz-transform: translateY(700px);
opacity:
}
}
/*******************50、rollIn***********************/ .animation50 {
-webkit-animation: rollIn 1s .2s ease both;
-moz-animation: rollIn 1s .2s ease both;
} @-webkit-keyframes rollIn {
% {
opacity: ;
-webkit-transform: translateX(-%) rotate(-120deg)
}
% {
opacity: ;
-webkit-transform: translateX(0px) rotate(0deg)
}
} @-moz-keyframes rollIn {
% {
opacity: ;
-moz-transform: translateX(-%) rotate(-120deg)
}
% {
opacity: ;
-moz-transform: translateX(0px) rotate(0deg)
}
}
/*******************51、rollOut***********************/ .animation51 {
-webkit-animation: rollOut 1s .2s ease both;
-moz-animation: rollOut 1s .2s ease both;
} @-webkit-keyframes rollOut {
% {
opacity: ;
-webkit-transform: translateX(0px) rotate(0deg)
}
% {
opacity: ;
-webkit-transform: translateX(%) rotate(120deg)
}
} @-moz-keyframes rollOut {
% {
opacity: ;
-moz-transform: translateX(0px) rotate(0deg)
}
% {
opacity: ;
-moz-transform: translateX(%) rotate(120deg)
}
}
/*******************52、slideDown***********************/ .slideDown {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
} @keyframes slideDown {
% {
transform: translateY(-%);
}
% {
transform: translateY(%);
}
% {
transform: translateY(-%);
}
% {
transform: translateY(%);
}
% {
transform: translateY(-%);
}
% {
transform: translateY(%);
}
} @-webkit-keyframes slideDown {
% {
-webkit-transform: translateY(-%);
}
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(-%);
}
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(-%);
}
% {
-webkit-transform: translateY(%);
}
}
/*******************53、slideUp***********************/ .slideUp {
animation-name: slideUp;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
} @keyframes slideUp {
% {
transform: translateY(%);
}
% {
transform: translateY(-%);
}
% {
transform: translateY(%);
}
% {
transform: translateY(-%);
}
% {
transform: translateY(%);
}
% {
transform: translateY(%);
}
} @-webkit-keyframes slideUp {
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(-%);
}
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(-%);
}
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(%);
}
}
/*******************54、slideLeft***********************/ .slideLeft {
animation-name: slideLeft;
-webkit-animation-name: slideLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
} @keyframes slideLeft {
% {
transform: translateX(%);
}
% {
transform: translateX(-%);
}
% {
transform: translateX(%);
}
% {
transform: translateX(-%);
}
% {
transform: translateX(%);
}
% {
transform: translateX(%);
}
} @-webkit-keyframes slideLeft {
% {
-webkit-transform: translateX(%);
}
% {
-webkit-transform: translateX(-%);
}
% {
-webkit-transform: translateX(%);
}
% {
-webkit-transform: translateX(-%);
}
% {
-webkit-transform: translateX(%);
}
% {
-webkit-transform: translateX(%);
}
}
/*******************55、slideRight***********************/ .slideRight {
animation-name: slideRight;
-webkit-animation-name: slideRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
} @keyframes slideRight {
% {
transform: translateX(-%);
}
% {
transform: translateX(%);
}
% {
transform: translateX(-%);
}
% {
transform: translateX(%);
}
% {
transform: translateX(-%);
}
% {
transform: translateX(%);
}
} @-webkit-keyframes slideRight {
% {
-webkit-transform: translateX(-%);
}
% {
-webkit-transform: translateX(%);
}
% {
-webkit-transform: translateX(-%);
}
% {
-webkit-transform: translateX(%);
}
% {
-webkit-transform: translateX(-%);
}
% {
-webkit-transform: translateX(%);
}
}
/*******************56、slideExpandUp***********************/ .slideExpandUp {
animation-name: slideExpandUp;
-webkit-animation-name: slideExpandUp;
animation-duration: .6s;
-webkit-animation-duration: .6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease -out;
visibility: visible !important;
} @keyframes slideExpandUp {
% {
transform: translateY(%) scaleX(0.5);
}
% {
transform: translateY(-%) scaleX(0.5);
}
% {
transform: translateY(%) scaleX(0.5);
}
% {
transform: translateY(%) scaleX(1.1);
}
% {
transform: translateY(%) scaleX(0.9);
}
% {
transform: translateY(%) scaleX(1.05);
}
% {
transform: translateY(%) scaleX(0.95);
}
% {
transform: translateY(%) scaleX(1.02);
}
% {
transform: translateY(%) scaleX();
}
} @-webkit-keyframes slideExpandUp {
% {
-webkit-transform: translateY(%) scaleX(0.5);
}
% {
-webkit-transform: translateY(-%) scaleX(0.5);
}
% {
-webkit-transform: translateY(%) scaleX(0.5);
}
% {
-webkit-transform: translateY(%) scaleX(1.1);
}
% {
-webkit-transform: translateY(%) scaleX(0.9);
}
% {
-webkit-transform: translateY(%) scaleX(1.05);
}
% {
-webkit-transform: translateY(%) scaleX(0.95);
}
% {
-webkit-transform: translateY(%) scaleX(1.02);
}
% {
-webkit-transform: translateY(%) scaleX();
}
}
/*******************57、expandUp***********************/ .expandUp {
animation-name: expandUp;
-webkit-animation-name: expandUp;
animation-duration: .7s;
-webkit-animation-duration: .7s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
visibility: visible !important;
} @keyframes expandUp {
% {
transform: translateY(%) scale(0.6) scaleY(0.5);
}
% {
transform: translateY(-%) scaleY(1.12);
}
% {
transform: translateY(%);
}
% {
transform: translateY(%) scale() scaleY();
}
} @-webkit-keyframes expandUp {
% {
-webkit-transform: translateY(%) scale(0.6) scaleY(0.5);
}
% {
-webkit-transform: translateY(-%) scaleY(1.12);
}
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(%) scale() scaleY();
}
}
/*******************58、bounce***********************/ .bounce {
animation-name: bounce;
-webkit-animation-name: bounce;
animation-duration: .6s;
-webkit-animation-duration: .6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
transform-origin: % %;
-ms-transform-origin: % %;
-webkit-transform-origin: % %;
} @keyframes bounce {
% {
transform: translateY(%) scaleY(0.6);
}
% {
transform: translateY(-%) scaleY(1.1);
}
% {
transform: translateY(%) scaleY(0.95) scaleX(1.05);
}
% {
transform: translateY(%) scaleY(1.05) scaleX();
}
% {
transform: translateY(%) scaleY(0.95) scaleX();
}
% {
transform: translateY(%) scaleY() scaleX();
}
} @-webkit-keyframes bounce {
% {
-webkit-transform: translateY(%) scaleY(0.6);
}
% {
-webkit-transform: translateY(-%) scaleY(1.1);
}
% {
-webkit-transform: translateY(%) scaleY(0.95) scaleX(1.05);
}
% {
-webkit-transform: translateY(%) scaleY(1.05) scaleX();
}
% {
-webkit-transform: translateY(%) scaleY(0.95) scaleX();
}
% {
-webkit-transform: translateY(%) scaleY() scaleX();
}
}
/*******************59、pulse***********************/ .pulse {
animation-name: pulse;
-webkit-animation-name: pulse;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
} @keyframes pulse {
% {
transform: scale(0.9);
opacity: 0.7;
}
% {
transform: scale();
opacity: ;
}
% {
transform: scale(0.9);
opacity: 0.7;
}
} @-webkit-keyframes pulse {
% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
% {
-webkit-transform: scale();
opacity: ;
}
% {
-webkit-transform: scale(0.95);
opacity: 0.7;
}
}
/*******************60、bigEntrance***********************/ .bigEntrance {
animation-name: bigEntrance;
-webkit-animation-name: bigEntrance;
animation-duration: .6s;
-webkit-animation-duration: .6s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
} @keyframes bigEntrance {
% {
transform: scale(0.3) rotate(6deg) translateX(-%) translateY(%);
opacity: 0.2;
}
% {
transform: scale(1.03) rotate(-2deg) translateX(%) translateY(-%);
opacity: ;
}
% {
transform: scale(0.98) rotate(1deg) translateX(%) translateY(%);
opacity: ;
}
% {
transform: scale(1.01) rotate(-1deg) translateX(%) translateY(%);
opacity: ;
}
% {
transform: scale(0.99) rotate(1deg) translateX(%) translateY(%);
opacity: ;
}
% {
transform: scale(1.01) rotate(0deg) translateX(%) translateY(%);
opacity: ;
}
% {
transform: scale() rotate(0deg) translateX(%) translateY(%);
opacity: ;
}
} @-webkit-keyframes bigEntrance {
% {
-webkit-transform: scale(0.3) rotate(6deg) translateX(-%) translateY(%);
opacity: 0.2;
}
% {
-webkit-transform: scale(1.03) rotate(-2deg) translateX(%) translateY(-%);
opacity: ;
}
% {
-webkit-transform: scale(0.98) rotate(1deg) translateX(%) translateY(%);
opacity: ;
}
% {
-webkit-transform: scale(1.01) rotate(-1deg) translateX(%) translateY(%);
opacity: ;
}
% {
-webkit-transform: scale(0.99) rotate(1deg) translateX(%) translateY(%);
opacity: ;
}
% {
-webkit-transform: scale(1.01) rotate(0deg) translateX(%) translateY(%);
opacity: ;
}
% {
-webkit-transform: scale() rotate(0deg) translateX(%) translateY(%);
opacity: ;
}
}
/*******************61、expandOpen***********************/ .expandOpen {
animation-name: expandOpen;
-webkit-animation-name: expandOpen;
animation-duration: .2s;
-webkit-animation-duration: .2s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
visibility: visible !important;
} @keyframes expandOpen {
% {
transform: scale(1.8);
}
% {
transform: scale(0.95);
}
% {
transform: scale(1.05);
}
% {
transform: scale(0.98);
}
% {
transform: scale();
}
} @-webkit-keyframes expandOpen {
% {
-webkit-transform: scale(1.8);
}
% {
-webkit-transform: scale(0.95);
}
% {
-webkit-transform: scale(1.05);
}
% {
-webkit-transform: scale(0.98);
}
% {
-webkit-transform: scale();
}
}
/*******************62、fadeIn***********************/ .fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
visibility: visible !important;
} @keyframes fadeIn {
% {
transform: scale();
opacity: 0.0;
}
% {
transform: scale(1.1);
}
% {
transform: scale(0.9);
opacity: ;
}
% {
transform: scale();
opacity: ;
}
} @-webkit-keyframes fadeIn {
% {
-webkit-transform: scale();
opacity: 0.0;
}
% {
-webkit-transform: scale(1.1);
}
% {
-webkit-transform: scale(0.9);
opacity: ;
}
% {
-webkit-transform: scale();
opacity: ;
}
}
/*******************63、hatch***********************/ .hatch {
animation-name: hatch;
-webkit-animation-name: hatch;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
transform-origin: % %;
-ms-transform-origin: % %;
-webkit-transform-origin: % %;
visibility: visible !important;
} @keyframes hatch {
% {
transform: rotate(0deg) scaleY(0.6);
}
% {
transform: rotate(-2deg) scaleY(1.05);
}
% {
transform: rotate(2deg) scaleY();
}
% {
transform: rotate(-2deg);
}
% {
transform: rotate(1deg);
}
% {
transform: rotate(-1deg);
}
% {
transform: rotate(0deg);
}
} @-webkit-keyframes hatch {
% {
-webkit-transform: rotate(0deg) scaleY(0.6);
}
% {
-webkit-transform: rotate(-2deg) scaleY(1.05);
}
% {
-webkit-transform: rotate(2deg) scaleY();
}
% {
-webkit-transform: rotate(-2deg);
}
% {
-webkit-transform: rotate(1deg);
}
% {
-webkit-transform: rotate(-1deg);
}
% {
-webkit-transform: rotate(0deg);
}
}
/*******************64、floating***********************/ .floating {
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
} @keyframes floating {
% {
transform: translateY(%);
}
% {
transform: translateY(%);
}
% {
transform: translateY(%);
}
} @-webkit-keyframes floating {
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(%);
}
% {
-webkit-transform: translateY(%);
}
}
/*******************65、tossing***********************/ .tossing {
animation-name: tossing;
-webkit-animation-name: tossing;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
} @keyframes tossing {
% {
transform: rotate(-4deg);
}
% {
transform: rotate(4deg);
}
% {
transform: rotate(-4deg);
}
} @-webkit-keyframes tossing {
% {
-webkit-transform: rotate(-4deg);
}
% {
-webkit-transform: rotate(4deg);
}
% {
-webkit-transform: rotate(-4deg);
}
}
/*******************66、pullUp***********************/ .pullUp {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
} .pullUp {
animation-name: pullUp;
-webkit-animation-name: pullUp;
animation-duration: .1s;
-webkit-animation-duration: .1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: % %;
-ms-transform-origin: % %;
-webkit-transform-origin: % %;
} @keyframes pullUp {
% {
transform: scaleY(0.1);
}
% {
transform: scaleY(1.02);
}
% {
transform: scaleY(0.98);
}
% {
transform: scaleY(1.01);
}
% {
transform: scaleY(0.98);
}
% {
transform: scaleY(1.01);
}
% {
transform: scaleY();
}
} @-webkit-keyframes pullUp {
% {
-webkit-transform: scaleY(0.1);
}
% {
-webkit-transform: scaleY(1.02);
}
% {
-webkit-transform: scaleY(0.98);
}
% {
-webkit-transform: scaleY(1.01);
}
% {
-webkit-transform: scaleY(0.98);
}
% {
-webkit-transform: scaleY(1.01);
}
% {
-webkit-transform: scaleY();
}
}
/*******************67、pullDown***********************/ .pullDown {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
} .pullDown {
animation-name: pullDown;
-webkit-animation-name: pullDown;
animation-duration: .1s;
-webkit-animation-duration: .1s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: % %;
-ms-transform-origin: % %;
-webkit-transform-origin: % %;
} @keyframes pullDown {
% {
transform: scaleY(0.1);
}
% {
transform: scaleY(1.02);
}
% {
transform: scaleY(0.98);
}
% {
transform: scaleY(1.01);
}
% {
transform: scaleY(0.98);
}
% {
transform: scaleY(1.01);
}
% {
transform: scaleY();
}
} @-webkit-keyframes pullDown {
% {
-webkit-transform: scaleY(0.1);
}
% {
-webkit-transform: scaleY(1.02);
}
% {
-webkit-transform: scaleY(0.98);
}
% {
-webkit-transform: scaleY(1.01);
}
% {
-webkit-transform: scaleY(0.98);
}
% {
-webkit-transform: scaleY(1.01);
}
% {
-webkit-transform: scaleY();
}
}
/*******************68、stretchLeft***********************/ .stretchLeft {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
} .stretchLeft {
animation-name: stretchLeft;
-webkit-animation-name: stretchLeft;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: % %;
-ms-transform-origin: % %;
-webkit-transform-origin: % %;
} @keyframes stretchLeft {
% {
transform: scaleX(0.3);
}
% {
transform: scaleX(1.02);
}
% {
transform: scaleX(0.98);
}
% {
transform: scaleX(1.01);
}
% {
transform: scaleX(0.98);
}
% {
transform: scaleX(1.01);
}
% {
transform: scaleX();
}
} @-webkit-keyframes stretchLeft {
% {
-webkit-transform: scaleX(0.3);
}
% {
-webkit-transform: scaleX(1.02);
}
% {
-webkit-transform: scaleX(0.98);
}
% {
-webkit-transform: scaleX(1.01);
}
% {
-webkit-transform: scaleX(0.98);
}
% {
-webkit-transform: scaleX(1.01);
}
% {
-webkit-transform: scaleX();
}
}
/*******************69、stretchRight***********************/ .stretchRight {
width: 300px;
height: 300px;
background-image: none !important;
background-color: #fe5652 !important;
border-radius: 24px;
margin: 0px auto;
} .stretchRight {
animation-name: stretchRight;
-webkit-animation-name: stretchRight;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
transform-origin: % %;
-ms-transform-origin: % %;
-webkit-transform-origin: % %;
} @keyframes stretchRight {
% {
transform: scaleX(0.3);
}
% {
transform: scaleX(1.02);
}
% {
transform: scaleX(0.98);
}
% {
transform: scaleX(1.01);
}
% {
transform: scaleX(0.98);
}
% {
transform: scaleX(1.01);
}
% {
transform: scaleX();
}
} @-webkit-keyframes stretchRight {
% {
-webkit-transform: scaleX(0.3);
}
% {
-webkit-transform: scaleX(1.02);
}
% {
-webkit-transform: scaleX(0.98);
}
% {
-webkit-transform: scaleX(1.01);
}
% {
-webkit-transform: scaleX(0.98);
}
% {
-webkit-transform: scaleX(1.01);
}
% {
-webkit-transform: scaleX();
}
}
/**************************完******************************/
</style>
<script type="text/javascript">
$(function() {
$('#css1').click(function() {
$('#right').removeClass();
$('#right').addClass('animation1');
return false;
});
$('#css2').click(function() {
$('#right').removeClass();
$('#right').addClass('animation2');
return false;
});
$('#css3').click(function() {
$('#right').removeClass();
$('#right').addClass('animation3');
return false;
});
$('#css4').click(function() {
$('#right').removeClass();
$('#right').addClass('animation4');
return false;
});
$('#css5').click(function() {
$('#right').removeClass();
$('#right').addClass('animation5');
return false;
});
$('#css6').click(function() {
$('#right').removeClass();
$('#right').addClass('animation6');
return false;
});
$('#css7').click(function() {
$('#right').removeClass();
$('#right').addClass('animation7');
return false;
});
$('#css8').click(function() {
$('#right').removeClass();
$('#right').addClass('animation8');
return false;
});
$('#css9').click(function() {
$('#right').removeClass();
$('#right').addClass('animation9');
return false;
});
$('#css10').click(function() {
$('#right').removeClass();
$('#right').addClass('animation10');
return false;
});
$('#css11').click(function() {
$('#right').removeClass();
$('#right').addClass('animation11');
return false;
});
$('#css12').click(function() {
$('#right').removeClass();
$('#right').addClass('animation12');
return false;
});
$('#css13').click(function() {
$('#right').removeClass();
$('#right').addClass('animation13');
return false;
});
$('#css14').click(function() {
$('#right').removeClass();
$('#right').addClass('animation14');
return false;
});
$('#css15').click(function() {
$('#right').removeClass();
$('#right').addClass('animation15');
return false;
});
$('#css16').click(function() {
$('#right').removeClass();
$('#right').addClass('animation16');
return false;
});
$('#css17').click(function() {
$('#right').removeClass();
$('#right').addClass('animation17');
return false;
});
$('#css18').click(function() {
$('#right').removeClass();
$('#right').addClass('animation18');
return false;
});
$('#css19').click(function() {
$('#right').removeClass();
$('#right').addClass('animation19');
return false;
});
$('#css20').click(function() {
$('#right').removeClass();
$('#right').addClass('animation20');
return false;
});
$('#css21').click(function() {
$('#right').removeClass();
$('#right').addClass('animation21');
return false;
});
$('#css22').click(function() {
$('#right').removeClass();
$('#right').addClass('animation22');
return false;
});
$('#css23').click(function() {
$('#right').removeClass();
$('#right').addClass('animation23');
return false;
});
$('#css24').click(function() {
$('#right').removeClass();
$('#right').addClass('animation24');
return false;
});
$('#css25').click(function() {
$('#right').removeClass();
$('#right').addClass('animation25');
return false;
});
$('#css26').click(function() {
$('#right').removeClass();
$('#right').addClass('animation26');
return false;
});
$('#css27').click(function() {
$('#right').removeClass();
$('#right').addClass('animation27');
return false;
});
$('#css28').click(function() {
$('#right').removeClass();
$('#right').addClass('animation28');
return false;
});
$('#css29').click(function() {
$('#right').removeClass();
$('#right').addClass('animation29');
return false;
});
$('#css30').click(function() {
$('#right').removeClass();
$('#right').addClass('animation30');
return false;
});
$('#css31').click(function() {
$('#right').removeClass();
$('#right').addClass('animation31');
return false;
});
$('#css32').click(function() {
$('#right').removeClass();
$('#right').addClass('animation32');
return false;
});
$('#css33').click(function() {
$('#right').removeClass();
$('#right').addClass('animation33');
return false;
});
$('#css34').click(function() {
$('#right').removeClass();
$('#right').addClass('animation34');
return false;
});
$('#css35').click(function() {
$('#right').removeClass();
$('#right').addClass('animation35');
return false;
});
$('#css36').click(function() {
$('#right').removeClass();
$('#right').addClass('animation36');
return false;
});
$('#css37').click(function() {
$('#right').removeClass();
$('#right').addClass('animation37');
return false;
});
$('#css38').click(function() {
$('#right').removeClass();
$('#right').addClass('animation38');
return false;
});
$('#css39').click(function() {
$('#right').removeClass();
$('#right').addClass('animation39');
return false;
});
$('#css40').click(function() {
$('#right').removeClass();
$('#right').addClass('animation40');
return false;
});
$('#css41').click(function() {
$('#right').removeClass();
$('#right').addClass('animation41');
return false;
});
$('#css42').click(function() {
$('#right').removeClass();
$('#right').addClass('animation42');
return false;
});
$('#css43').click(function() {
$('#right').removeClass();
$('#right').addClass('animation43');
return false;
});
$('#css44').click(function() {
$('#right').removeClass();
$('#right').addClass('animation44');
return false;
});
$('#css45').click(function() {
$('#right').removeClass();
$('#right').addClass('animation45');
return false;
});
$('#css46').click(function() {
$('#right').removeClass();
$('#right').addClass('animation46');
return false;
});
$('#css47').click(function() {
$('#right').removeClass();
$('#right').addClass('animation47');
return false;
});
$('#css48').click(function() {
$('#right').removeClass();
$('#right').addClass('animation48');
return false;
});
$('#css49').click(function() {
$('#right').removeClass();
$('#right').addClass('animation49');
return false;
});
$('#css50').click(function() {
$('#right').removeClass();
$('#right').addClass('animation50');
return false;
});
$('#css51').click(function() {
$('#right').removeClass();
$('#right').addClass('animation51');
return false;
});
$('#css52').click(function() {
$('#right').removeClass();
$('#right').addClass('slideDown');
return false;
});
$('#css53').click(function() {
$('#right').removeClass();
$('#right').addClass('slideUp');
return false;
});
$('#css54').click(function() {
$('#right').removeClass();
$('#right').addClass('slideLeft');
return false;
});
$('#css55').click(function() {
$('#right').removeClass();
$('#right').addClass('slideRight');
return false;
});
$('#css56').click(function() {
$('#right').removeClass();
$('#right').addClass('slideExpandUp');
return false;
});
$('#css57').click(function() {
$('#right').removeClass();
$('#right').addClass('expandUp');
return false;
});
$('#css58').click(function() {
$('#right').removeClass();
$('#right').addClass('bounce');
return false;
});
$('#css59').click(function() {
$('#right').removeClass();
$('#right').addClass('pulse');
return false;
});
$('#css60').click(function() {
$('#right').removeClass();
$('#right').addClass('bigEntrance');
return false;
});
$('#css61').click(function() {
$('#right').removeClass();
$('#right').addClass('expandOpen');
return false;
});
$('#css62').click(function() {
$('#right').removeClass();
$('#right').addClass('fadeIn');
return false;
});
$('#css63').click(function() {
$('#right').removeClass();
$('#right').addClass('hatch');
return false;
});
$('#css64').click(function() {
$('#right').removeClass();
$('#right').addClass('floating');
return false;
});
$('#css65').click(function() {
$('#right').removeClass();
$('#right').addClass('tossing');
return false;
});
$('#css66').click(function() {
$('#right').removeClass();
$('#right').addClass('pullUp');
return false;
});
$('#css67').click(function() {
$('#right').removeClass();
$('#right').addClass('pullDown');
return false;
});
$('#css68').click(function() {
$('#right').removeClass();
$('#right').addClass('stretchLeft');
return false;
});
$('#css69').click(function() {
$('#right').removeClass();
$('#right').addClass('stretchRight');
return false;
});
})
</script>
</head> <body>
<div class="left">
<ul class="nav">
<h2>CSS3图片动画展示</h2>
<a href="http://www.100sucai.com/css3/1.html" target="_blank">100素材网 CSS3动画</a>
<br /><br /><br />
<li><a id="css1" href="#" href="#" title="闪光灯">、闪光灯</a></li>
<li><a id="css2" href="#" title="弹起">、弹起</a></li>
<li><a id="css3" href="#" title="摇摆">、摇摆</a></li>
<li><a id="css4" href="#" title="秋千">、秋千</a></li>
<li><a id="css5" href="#" title="swing">、swing</a></li>
<li><a id="css6" href="#" title="疯狂摆动">、疯狂摆动</a></li>
<li><a id="css7" href="#" title="脉冲">、脉冲</a></li>
<li><a id="css8" href="#" title="翻转">、翻转</a></li>
<li><a id="css9" href="#" title="X轴淡入">、X轴淡入</a></li>
<li><a id="css10" href="#" title="X轴淡出">、X轴淡出</a></li>
<li><a id="css11" href="#" title="Y轴淡入">、Y轴淡入</a></li>
<li><a id="css12" href="#" title="Y轴淡出">、Y轴淡出</a></li>
<li><a id="css13" href="#" title="下方淡入">、下方淡入</a></li>
<li><a id="css14" href="#" title="上方淡入">、上方淡入</a></li>
<li><a id="css15" href="#" title="左边淡入">、左边淡入</a></li>
<li><a id="css16" href="#" title="右边淡入">、右边淡入</a></li>
<li><a id="css17" href="#" title="底部淡入">、底部淡入</a></li>
<li><a id="css18" href="#" title="顶部淡入">、顶部淡入</a></li>
<li><a id="css19" href="#" title="页面左边淡入">、页面左边淡入</a></li>
<li><a id="css20" href="#" title="页面右边淡入">、页面右边淡入</a></li>
<li><a id="css21" href="#" title="向上淡出">、向上淡出</a></li>
<li><a id="css22" href="#" title="向下淡出">、向下淡出</a></li>
<li><a id="css23" href="#" title="向左淡出">、向左淡出</a></li>
<li><a id="css24" href="#" title="向右淡出">、向右淡出</a></li>
<li><a id="css25" href="#" title="顶部淡出">、顶部淡出</a></li>
<li><a id="css26" href="#" title="底部淡出">、底部淡出</a></li>
<li><a id="css27" href="#" title="页面左边淡出">、页面左边淡出</a></li>
<li><a id="css28" href="#" title="页面右边淡出">、页面右边淡出</a></li>
<li><a id="css29" href="#" title="bounceIn">、bounceIn</a></li>
<li><a id="css30" href="#" title="bounceInDown">、bounceInDown</a></li>
<li><a id="css31" href="#" title="bounceInUp">、bounceInUp</a></li>
<li><a id="css32" href="#" title="bounceInLeft">、bounceInLeft</a></li>
<li><a id="css33" href="#" title="bounceInRight">、bounceInRight</a></li>
<li><a id="css34" href="#" title="bounceOut">、bounceOut</a></li>
<li><a id="css35" href="#" title="bounceOutDown">、bounceOutDown</a></li>
<li><a id="css36" href="#" title="bounceOutUp">、bounceOutUp</a></li>
<li><a id="css37" href="#" title="bounceOutLeft">、bounceOutLeft</a></li>
<li><a id="css38" href="#" title="bounceOutRight">、bounceOutRight</a></li>
<li><a id="css39" href="#" title="rotateIn">、rotateIn</a></li>
<li><a id="css40" href="#" title="rotateInDownLeft">、rotateInDownLeft</a></li>
<li><a id="css41" href="#" title="rotateInDownRight">、rotateInDownRight</a></li>
<li><a id="css42" href="#" title="rotateInUpLeft">、rotateInUpLeft</a></li>
<li><a id="css43" href="#" title="rotateInUpRight">、rotateInUpRight</a></li>
<li><a id="css44" href="#" title="rotateOut">、rotateOut</a></li>
<li><a id="css45" href="#" title="rotateOutDownLeft">、rotateOutDownLeft</a></li>
<li><a id="css46" href="#" title="rotateOutDownRight">、rotateOutDownRight</a></li>
<li><a id="css47" href="#" title="rotateOutUpLeft">、rotateOutUpLeft</a></li>
<li><a id="css48" href="#" title="rotateOutUpRight">、rotateOutUpRight</a></li>
<li><a id="css49" href="#" title="hinge">、hinge</a></li>
<li><a id="css50" href="#" title="rollIn">、rollIn</a></li>
<li><a id="css51" href="#" title="rollOut">、rollOut</a></li>
<li><a id="css52" href="#" title="slideDown">、slideDown</a></li>
<li><a id="css53" href="#" title="slideUp">、slideUp</a></li>
<li><a id="css54" href="#" title="slideLeft">、slideLeft</a></li>
<li><a id="css55" href="#" title="slideRight">、slideRight</a></li>
<li><a id="css56" href="#" title="slideExpandUp">、slideExpandUp</a></li>
<li><a id="css57" href="#" title="expandUp">、expandUp</a></li>
<li><a id="css58" href="#" title="bounce">、bounce</a></li>
<li><a id="css59" href="#" title="pulse">、pulse</a></li>
<li><a id="css60" href="#" title="bigEntrance">、bigEntrance</a></li>
<li><a id="css61" href="#" title="expandOpen">、expandOpen</a></li>
<li><a id="css62" href="#" title="fadeIn">、fadeIn</a></li>
<li><a id="css63" href="#" title="hatch">、hatch</a></li>
<li><a id="css64" href="#" title="floating">、floating</a></li>
<li><a id="css65" href="#" title="tossing">、tossing</a></li>
<li><a id="css66" href="#" title="pullUp">、pullUp</a></li>
<li><a id="css67" href="#" title="pullDown">、pullDown</a></li>
<li><a id="css68" href="#" title="stretchLeft">、stretchLeft</a></li>
<li><a id="css69" href="#" title="stretchRight">、stretchRight</a></li>
</ul>
</div>
<div id="right"></div>
</body> </html>
jQuery之动画效果
1、show()显示效果
语法：show(speed,callback) Number/String,Function speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数。
show(speed,[easing],callback) Number/String easing默认是swing,可选linear;
$("#div1").show(3000,function(){ alert("动画显示完成!"); });
2、hide()隐藏效果
语法:hide(speed,callback) Number/String,Function
hide(speed,easing,callback) Number/String
$("#div1").hide(3000,function(){ alert("动画隐藏完成") });
3、toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示
语法：toggle(speed,callback) Number/String,Function
toggle(speed,callback) Number/String,String,Function
$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });
4、slideDown()向下显示，slow()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开
语法:slideDown(speed,callback) Number/String,Function
slideDown(speed,[easing],callback) Number/String,Function
$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });
5、slideUp()向上隐藏, hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏
语法:slideUp(speed,callback) Number/String,Function
slideUp(speed,[easing],callback) Number/String,String,Function
$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })
6、slideToggle垂直方向上切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。
语法:slideToggle(speed,callback) Number/String,Function
slideToggle(speed,[easing],callback) Number/String,String,Function
$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });
7、fadeIn() 以改变透明度来显示
语法：fadeIn(speed,callback) Number/String,Function
fadeIn(speed,[easing],callback) Number/String,Function
$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });
8、fadeOut() 以改变透明度来隐藏
语法：fadeOut(speed,callback) Number/String,Function
fadeOut(speed,[easing],callcack) Number/String,String,Function
$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });
9、fadeToggle() 以改变透明度来切换显示隐藏状态
语法: fadeToggle(speed,callback) Number/String,Function
fadeToggle(speed,[easing],callback) Number/String,Function
$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });
10、fadeTo() 由指定的时间将透明度改变到指定的透明度
语法：fadeTo(speed,callback) Number/String,Function
fadeTo([speed],opacity,[easing],[fn]) Number/String,Float,String,Function
$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });
11、animate() 自定义动画，一般来说数字变动都可以用于动画。
语法：animate(params,speed,easing,callback); 样式参数，时间，可选择，函数
$("#div1").animate({ width:300px,height,300px },3000);
其中params要用中括号括起来，可以使用的css样式参数。注意要采用骆驼法则，如font-size要写成fontSize。颜色渐变不支持。
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
12、stop() 停止正在执行动画
stop([clearQueue],[gotoEnd]); 两个参数均为布尔值，第一个表示，是否停止动画执行、第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。
$("#div1").hide(5000) //此动画正在执行
$("#div1").stop(); //上一行代码指定的动画停止在一半状态
$("#div1").stop(true,true); //停止当前动画，同时动画切换到完成执行状态。
13、delay() 延迟执行动画 当一个动画stop()了之后还能够用delay()来延迟执行。从停止位置继续执行。当然用原来的方法继续执行也不可，不过没有延时效果。
delay(duration,[queueName]) 设置一个延迟值来执行动画 Integer,String
$("#div1").delay(3000).hide(3000); //表示在3000毫秒后执行hide(3000);
14、jQuery.fx.off //该属性只是是否关闭当前页面上的动画,关闭动画之后，没有动画效果，所有设置了执行时间的动画会瞬间完成。注意此属性出现的位置。出现的位置不同影响的范围也不同。
$(function(){
jQuery.fx.off = true; //属性在事件外面，对页面加载后执行的所有动画有效
$("#div1").click(function(){ //属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画
$("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide();
});
})
15、jQuery.fx.interval //该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围
$(function(){
jQuery.fx.interval = 1000;
$("#div1").click(function(){
$("#div1").hide(3000); //jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。
});
})
水波纹效果：
<!doctype html>
<html lang="en"> <head>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta charset="UTF-8" />
<title>Document</title>
<style>
.arc {
width: 60px;
height: 60px;
position: absolute;
z-index: ;
top: 50px;
left: 50px;
border: 0px solid black;
border-radius: 50px;
background: #a0a0a0;
transform: scale();
border: 1px solid red;
} .animation1 {
animation: arc 3s linear 0s infinite;
-webkit-animation: arc 3s linear 0s infinite;
} .animation2 {
animation: arc 3s linear 1s infinite;
-webkit-animation: arc 3s linear 1s infinite;
} .animation3 {
animation: arc 3s linear 2s infinite;
-webkit-animation: arc 3s linear 2s infinite;
} @keyframes arc {
% {
transform: scale();
opacity: ;
}
% {
transform: scale();
opacity: ;
}
} @-webkit-keyframes arc {
% {
-webkit-transform: scale();
opacity: ;
}
% {
-webkit-transform: scale();
opacity: ;
}
}
</style> </head> <body>
<a href="https://www.baidu.com/link?url=mhPmSXjPPcriQm89sp4DMhsWJOSiNVhfoBoG0xQ45amXHx8o00tLpK_Cm8GByndTg8CgjQxUtU6QW5GlnsimIq&wd=&eqid=f1912e99003a2fbc00000004572ed664" target="_blank">
<div class="arc animation1"></div>
<div class="arc animation2"></div>
<div class="arc animation3"></div>
</a>
</body> </html>
CSS3 动画实现方法大全的更多相关文章
- [f]添加css3动画的方法
添加css3的一些动画的属性 使用方法: css3(oDiv[0], 'scale', 300)('rotate', 300);css3(oDiv[0], 'animation', '"dd ...
- css3动画大全
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3动画的性能优化_针对移动端卡顿问题
这篇文章主要讲的是怎样制作流畅动画,特别是针对移动端.在这里我首先介绍制作动画的几种方法的优缺点:接着会着重介绍用css3制作动画的注意事项. 资源网站大全 https://55wd.com 设计导航 ...
- 学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- [OC][转]UITableView属性及方法大全
Tip: UITableView属性及方法大全 (摘录地址) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; line-height: 14.0px; font: 1 ...
- 高性能 CSS3 动画
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...
- CSS3动画：YouTube的红色激光进度条
本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...
- 美妙的 CSS3 动画！一组梦幻般的按钮效果
今天给大家带来的是五款梦幻般的动画按钮效果.下面是在线演示,把鼠标放在按钮上试试,有惊喜哦!CSS3 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
随机推荐
- Css入门课程 Css基础
html css javascript三者关系 html是网页内容的载体 css是网页内容的表现,外观控制 javascript是网页逻辑处理和行为控制 css相对于html标签属性的优势 css简化 ...
- 3ds Max学习日记（一）
暑假闲来无事学习一发3ds Max.为啥要学这玩意?貌似可以用这东西三维建模.暑期生产实习选了一个搞vr的导师,貌似他忙得很,无奈只好先自己研究一下啦~ vr神马的还是有点意思的,虽然自己仅仅 ...
- linux 相关的问题
1,查找当前目录下的文件名,并重定向到文件t中 ls > t mac 下快速补全目录名快捷键tab
- Linux命令之查看cpu个数_核数_内存总数
http://blog.csdn.net/cgwcgw_/article/details/10000053 cpu个数 cat /proc/cpuinfo | grep "physical ...
- tc：逼良为娼
tc的学习原来是想着直接从用户态学习的,但是万万没想到哇,qdisc class两个概念直接把我给搞晕了,直接看代码吧 调用:tc qdisc add dev tap0 root handle 1: ...
- 【转】log4j.properties文件的配置
一.前言 log4j使用的还是比较多的,但是对于其配置又很难描述清楚要怎么配置,说明我自己对于log4j的配置并不是非常熟悉,所以在网上找了一篇详尽的 博文转载,在此非常感谢原文作者的辛苦付出,如有需 ...
- [C/C++] 字符串错题集
1. 答案:A 这里考查转义字符,注意 \\ 表示字符 \\123表示字符 {\t 表示制表符这些都是一个字符. 2. 答案C 先不看有没有重复的,共5个字母,有5×4×3×2×1 = 120种组合. ...
- BZOJ 1036 树的统计（树链剖分）
点权树链剖分模板题. # include <cstdio> # include <cstring> # include <cstdlib> # include &l ...
- 转：狄利克雷过程（dirichlet process ）的五种理解
狄利克雷过程(dirichlet process )的五种理解 原文:http://blog.csdn.net/xianlingmao/article/details/7342837 无参数贝叶 ...
- PowerDesigner 建表语句没出现字段描述
填写了Name 还是没有 修改步骤如下: