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 引入了众多供功能强大的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果. 温馨提示:为保 ...
随机推荐
- 访问需要HTTP Basic Authentication认证的资源的各种开发语言的实现
什么是HTTP Basic Authentication?直接看http://en.wikipedia.org/wiki/Basic_authentication_scheme吧. 在你访问一个需要H ...
- Unity3d学习日记（四）
跟着Unity的教程做了两天,做成了一个叫作survivalShooter的游戏,感觉还挺有意思的,做好后我就把它挂到了个人网站上. 如果你在我的网站的主页的话,点击这个图片就能跳到游戏界面. ...
- 201621044079 week13 网络
作业13-网络 1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以 ...
- SQL SERVER技术内幕之8 分组集
分组集就是分组(GROUP BY子句)使用的一组属性,在传统的SQL中,一个聚合查询只能定义一个分组集: 假设现在不想生成4个单独的结果集,而是希望生成一个统一的结果集,其中包含所有4个分组集的聚合 ...
- .NET环境下，通过LINQ操作SQLite数据库
//对应数据库中的某个表 [Table(Name = "main.Student")] public class Student { [Column(Na ...
- jira & analytics
jira & analytics jira 代码有毒呀 http://jira.xgqfrms.xyz:8888/rest/analytics/1.0/publish/bulk { resou ...
- BZOJ 2208 连通数(强连通分量)
先缩点,对于缩完点后的DAG,可以直接在每个scc dfs一次就可以求出终点是这个scc的点的点对个数. # include <cstdio> # include <cstring& ...
- JSON字符串和Javascript对象字面量
JSON字符串和Javascript对象字面量 JSON是基于Javascript语法的一个子集而创建的,特别是对象和数组字面量语法. 正是由于JSON的这种特殊来历,导致很多Javascript程序 ...
- CentOS 查看系统内核和版本
1.uname 命令用于查看系统内核与系统版本等信息,格式为“uname [-a]”. [root@bigdata-senior01 ~]# uname -a Linux bigdata-senior ...
- 【题解】CF#960 H-Santa's Gift
好久没有写过数据结构题目了,果然还是太不自信.实际上就是要求统计一个式子: \(\sum (c[k]*p[k] - C)^{2}\) 拆开,分别统计和与平方和 \(co[k] * \sum p[k]^ ...