html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标悬停css3动画效果</title>
<link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
<style>
.main a:not(:hover):not(:target) {-webkit-animation: 0s ease 0s normal none none;}
.main a:not(:hover):not(:target) {-moz-animation: 0s ease 0s normal none none;}
.main a:not(:hover):not(:target) {animation: 0s ease 0s normal none none !important;}
</style>
</head>
<body>
<div class="box">
<div class="main">
<a id="border-radius"></a>
<a id="border-radius-2"></a>
<a id="border-width"></a>
<a id="border-width-2"></a>
<a id="border-width-3"></a>
<a id="background-color"></a>
<a id="background-position"></a>
<a id="background-position-2"></a>
<a id="background-size"></a>
<a id="text-shadow"></a>
<a id="text-shadow-2"></a>
<a id="text-shadow-3"></a>
<a id="box-shadow"></a>
<a id="box-shadow-2"></a>
<a id="font-size"></a>
<a id="font-size-2"></a>
<a id="letter-spacing"></a>
<a id="text-indent"></a>
<a id="height"></a>
<a id="line-height"></a>
<a id="transform"></a>
<a id="transform-2"></a>
<a id="transform-3"></a>
<a id="transform-4"></a>
<a id="transform-5"></a>
<a id="transform-6"></a>
<a id="transform-7"></a>
<a id="transform-8"></a>
<a id="transform-9"></a>
<a id="transform-10"></a>
<a id="transform-origin"></a>
<a id=""></a>
</div>
</div>
</body>
</html>
CSS:
body, h1, p, ul, li {padding:; margin:;}
ul, li {list-style:none;}
body {font-family:Futura,'Century Gothic',sans-serif; background:url(../images/bg.jpg) repeat;}
a {color:#; text-decoration:none;}
.box {width:%; margin:50px ; text-align:center;}
.box h1 {text-align:center; font-size:%; line-height:; margin-bottom:20px;}
.box h1 p {font-size:26px; color:#c6c6c6; display:block;}
.box h1 p a {color:#c6c6c6;}
.hover-all {margin-top:20px;}
#hover, #all {font-size:12px; background-color:#; padding:5px 10px; margin:10px; color:#FFF; border-radius:2px;}
#hover:hover, #all:hover {background-color:#;}
.main {width:%; margin:10px auto; counter-reset:demo;}
.main:after {content:""; clear:both; display:block;}
.main a {width:175px; height:175px; line-height:175px; float:left; margin:18px; background:#bfbfbf; cursor:pointer; font-size:80px; color:#FFF; display:block; counter-increment:demo; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; text-align:center;}
.main a:before {content:counter(demo, decimal);}
.main a:after {content:attr(id); position:absolute; color:#; font-size:14px; right:; left:; bottom:-20px; line-height:; text-shadow:none; letter-spacing:;}
.info {margin-top:30px; font-size:12px;}
/** 1 **/
#border-radius {-webkit-animation:border-radius 1s ease 0s alternate none infinite;}
#border-radius {-moz-animation:border-radius 1s ease 0s alternate none infinite;}
#border-radius {animation:border-radius 1s ease 0s alternate none infinite;}
@-webkit-keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }
@-moz-keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }
@keyframes border-radius { from{border-radius: ; } to{border-radius: %; } }
/** 2 **/
#border-radius- {-webkit-animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}
#border-radius- {-moz-animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}
#border-radius- {animation:border-radius- 1s ease 0s alternate none infinite; border-radius: %;}
@-webkit-keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }
@-moz-keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }
@keyframes border-radius- { from{border-radius: %; } to{border-radius:% ; } }
/** 3 **/
#border-width {-webkit-animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}
#border-width {-moz-animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}
#border-width {animation:border-width 1s ease 0s alternate none infinite; border: ridge #;}
@-webkit-keyframes border-width { from{border-width:; } to{ border-width:80px;} }
@-moz-keyframes border-width { from{border-width:; } to{ border-width:80px;} }
@keyframes border-width { from{border-width:; } to{ border-width:80px;} }
/** 4 **/
#border-width- {-webkit-animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}
#border-width- {-moz-animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}
#border-width- {animation:border-width- 1s ease 0s alternate none infinite; border: dashed #;}
@-webkit-keyframes border-width- { from{border-width:; } to{ border-width:60px;} }
@-moz-keyframes border-width- { from{border-width:; } to{ border-width:60px;} }
@keyframes border-width- { from{border-width:; } to{ border-width:60px;} }
/** 5 **/
#border-width- {-webkit-animation:border-width- 1s ease 0s alternate none infinite; border: double #;}
#border-width- {-moz-animation:border-width- 1s ease 0s alternate none infinite; border: double #;}
#border-width- {animation:border-width- 1s ease 0s alternate none infinite; border: double #;}
@-webkit-keyframes border-width- { from{border-width:; } to{ border-width:80px;} }
@-moz-keyframes border-width- { from{border-width:; } to{ border-width:80px;} }
@keyframes border-width- { from{border-width:; } to{ border-width:80px;} }
/** 6 **/
#background-color {-webkit-animation:background-color 1s ease 0s alternate none infinite;}
#background-color {-moz-animation:background-color 1s ease 0s alternate none infinite;}
#background-color {animation:background-color 1s ease 0s alternate none infinite;}
@-webkit-keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }
@-moz-keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }
@keyframes background-color { from{background-color:#BFBFBF; } to{ background-color:#; } }
/** 7 **/
#background-position {-webkit-animation:background-position 1s ease 0s alternate none infinite; background-image:-webkit-linear-gradient(135deg, transparent %, black %, black %, transparent %, transparent %, black %, black); background-size:60px 60px;}
#background-position {-moz-animation:background-position 1s ease 0s alternate none infinite; background-image:-moz-linear-gradient(-45deg, transparent %, black %, black %, transparent %, transparent %, black %, black); background-size:60px 60px;}
#background-position {animation:background-position 1s ease 0s alternate none infinite; background-image:linear-gradient(-45deg, transparent %, black %, black %, transparent %, transparent %, black %, black); background-size:60px 60px;}
@-webkit-keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }
@-moz-keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }
@keyframes background-position{ from{background-position: ; } to{ background-position:% %; } }
/** 8 **/
#background-position- {-webkit-animation:background-position- 1s ease 0s alternate none infinite; background-color:#E04332; background-image:-webkit-linear-gradient(135deg, slateGray %, transparent %), -webkit-linear-gradient(45deg, transparent %, slateGray %), -webkit-linear-gradient(45deg, slateGray %, transparent %), -webkit-linear-gradient(135deg, transparent %, slateGray %); background-size:30px 370px; background-repeat:repeat-x; background-position:10px , 10px , 20px -190px, 20px -190px;}
#background-position- {-moz-animation:background-position- 1s ease 0s alternate none infinite; background-color:#E04332; background-image:-moz-linear-gradient(-45deg, slategray %, transparent %), linear-gradient(45deg, transparent %, slategray %), linear-gradient(45deg, slategray %, transparent %), linear-gradient(-45deg, transparent %, slategray %); background-size:30px 370px; background-repeat:repeat-x; background-position:10px , 10px , 20px -190px, 20px -190px;}
#background-position- {animation:background-position- 1s ease 0s alternate none infinite; background-color:#E04332; background-image:linear-gradient(-45deg, slategray %, transparent %), linear-gradient(45deg, transparent %, slategray %), linear-gradient(45deg, slategray %, transparent %), linear-gradient(-45deg, transparent %, slategray %); background-size:30px 370px; background-repeat:repeat-x; background-position:10px , 10px , 20px -190px, 20px -190px;}
@-webkit-keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }
@-moz-keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }
@keyframes background-position-{ from{background-position:10px , 10px , 20px -190px, 20px -190px; } to{ background-position:10px -70px, 10px -70px, 18px -120px, 18px -120px; } }
/** 9 **/
#background-size {-webkit-animation:background-size 1s ease 0s alternate none infinite; background-image:-webkit-repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-size:5px 5px; background-position:center center;}
#background-size {-moz-animation:background-size 1s ease 0s alternate none infinite; background-image:-moz-repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-size:5px 5px; background-position:center center;}
#background-size {animation:background-size 1s ease 0s alternate none infinite; background-image:repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-size:5px 5px; background-position:center center;}
@-webkit-keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }
@-moz-keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }
@keyframes background-size{ from{background-size:5px 5px; } to{ background-size:150px 150px; } }
/** 10 **/
#text-shadow{-webkit-animation:text-shadow 1s ease 0s alternate none infinite;}
#text-shadow{-moz-animation:text-shadow 1s ease 0s alternate none infinite;}
#text-shadow{animation:text-shadow 1s ease 0s alternate none infinite;}
@-webkit-keyframes text-shadow { from{text-shadow: #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }
@-moz-keyframes text-shadow { from{text-shadow: #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }
@keyframes text-shadow { from{text-shadow: #; } to{text-shadow:20px 20px 10px rgba(,,,0.5); } }
/** 11 **/
#text-shadow- {-webkit-animation:text-shadow- 1s ease 0s alternate none infinite;}
#text-shadow- {-moz-animation:text-shadow- 1s ease 0s alternate none infinite;}
#text-shadow- {animation:text-shadow- 1s ease 0s alternate none infinite;}
@-webkit-keyframes text-shadow- { from{text-shadow: #; } to{text-shadow: 20px #FFF; } }
@-moz-keyframes text-shadow- { from{text-shadow: #; } to{text-shadow: 20px #FFF; } }
@keyframes text-shadow- { from{text-shadow: #; } to{text-shadow: 20px #FFF; } }
/** 12 **/
#text-shadow- {-webkit-animation:text-shadow- 1s ease 0s alternate none infinite;}
#text-shadow- {-moz-animation:text-shadow- 1s ease 0s alternate none infinite;}
#text-shadow- {animation:text-shadow- 1s ease 0s alternate none infinite;}
@-webkit-keyframes text-shadow- { from{text-shadow: white; } to{text-shadow: rgba(,,,), -45px -45px red, -30px -30px orange, -15px -15px yellow, green, 15px 15px blue, 30px 30px indigo, 45px 45px violet; } }
@-moz-keyframes text-shadow- { from{text-shadow: white; } to{text-shadow: rgba(,,,), -45px -45px red, -30px -30px orange, -15px -15px yellow, green, 15px 15px blue, 30px 30px indigo, 45px 45px violet; } }
@keyframes text-shadow- { from{text-shadow: white; } to{text-shadow: rgba(,,,), -45px -45px red, -30px -30px orange, -15px -15px yellow, green, 15px 15px blue, 30px 30px indigo, 45px 45px violet; } }
/** 13 **/
#box-shadow {-webkit-animation:box-shadow 1s ease 0s alternate none infinite; -webkit-box-shadow: 75px 75px #BFBFBF inset, #BFBFBF;}
#box-shadow {-moz-animation:box-shadow 1s ease 0s alternate none infinite; -moz-box-shadow: 75px 75px #BFBFBF inset, #BFBFBF;}
#box-shadow {animation:box-shadow 1s ease 0s alternate none infinite; box-shadow: 75px 75px #BFBFBF inset, #BFBFBF;}
@-webkit-keyframes box-shadow { from{box-shadow: 75px 75px #BFBFBF inset, #BFBFBF; } to{box-shadow:inset 35px 50px #ccc, 75px 50px #ccc; } }
@-moz-keyframes box-shadow { from{box-shadow: 75px 75px #BFBFBF inset, #BFBFBF; } to{box-shadow:inset 35px 50px #ccc, 75px 50px #ccc; } }
@keyframes box-shadow { from{box-shadow: 75px 75px #BFBFBF inset, #BFBFBF; } to{box-shadow:inset 35px 50px #ccc, 75px 50px #ccc; } }
/** 14 **/
#box-shadow-{-webkit-animation:box-shadow- 1s ease 0s alternate none infinite;}
#box-shadow-{-moz-animation:box-shadow- 1s ease 0s alternate none infinite;}
#box-shadow-{animation:box-shadow- 1s ease 0s alternate none infinite;}
@-webkit-keyframes box-shadow- { from{box-shadow: #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }
@-moz-keyframes box-shadow- { from{box-shadow: #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }
@keyframes box-shadow- { from{box-shadow: #; } to{box-shadow: 150px 10px -50px rgba(,,,.); } }
/** 15 **/
#font-size {-webkit-animation:font-size 1s ease 0s alternate none infinite;}
#font-size {-moz-animation:font-size 1s ease 0s alternate none infinite;}
#font-size {animation:font-size 1s ease 0s alternate none infinite;}
@-webkit-keyframes font-size { from{font-size:80px; } to{font-size:10px; } }
@-moz-keyframes font-size { from{font-size:80px; } to{font-size:10px; } }
@keyframes font-size { from{font-size:80px; } to{font-size:10px; } }
/** 16 **/
#font-size- {-webkit-animation:font-size- 1s ease 0s alternate none infinite;}
#font-size- {-moz-animation:font-size- 1s ease 0s alternate none infinite;}
#font-size- {animation:font-size- 1s ease 0s alternate none infinite;}
@-webkit-keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }
@-moz-keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }
@keyframes font-size- { from{font-size:80px; } to{font-size:250px; } }
/** 17 **/
#letter-spacing {-webkit-animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}
#letter-spacing {-moz-animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}
#letter-spacing {animation:letter-spacing 1s ease 0s alternate none infinite; overflow:hidden;}
@-webkit-keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }
@-moz-keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }
@keyframes letter-spacing { from{letter-spacing:; } to{letter-spacing:90px; } }
/** 18 **/
#text-indent {-webkit-animation:text-indent 1s ease 0s alternate none infinite;}
#text-indent {-moz-animation:text-indent 1s ease 0s alternate none infinite;}
#text-indent {animation:text-indent 1s ease 0s alternate none infinite;}
@-webkit-keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }
@-moz-keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }
@keyframes text-indent { from{text-indent:; } %{text-indent:100px; } to{text-indent:-100px; } }
/** 19 **/
#height {-webkit-animation:height 1s ease 0s alternate none infinite;}
#height {-moz-animation:height 1s ease 0s alternate none infinite;}
#height {animation:height 1s ease 0s alternate none infinite;}
@-webkit-keyframes height { from{height:175px; } to{height:10px; } }
@-moz-keyframes height { from{height:175px; } to{height:10px; } }
@keyframes height { from{height:175px; } to{height:10px; } }
/** 20 **/
#line-height {-webkit-animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}
#line-height {-moz-animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}
#line-height {animation:line-height 1s ease 0s alternate none infinite; line-height:60px;}
@-webkit-keyframes line-height { from{line-height:60px; } to{line-height:350px; } }
@-moz-keyframes line-height { from{line-height:60px; } to{line-height:350px; } }
@keyframes line-height { from{line-height:60px; } to{line-height:350px; } }
/** 21 **/
#transform {-webkit-animation:transform 1s ease 0s alternate none infinite;}
#transform {-moz-animation:transform 1s ease 0s alternate none infinite;}
#transform {animation:transform 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform { from{-webkit-transform:rotate(0deg); } to{-webkit-transform:rotate(360deg); } }
@-moz-keyframes transform { from{-moz-transform:rotate(0deg); } to{-moz-transform:rotate(360deg); } }
@keyframes transform { from{transform:rotate(0deg); } to{transform:rotate(360deg); } }
/** 22 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {animation:transform- 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:scale(); } to{-webkit-transform:scale(); } }
@-moz-keyframes transform- { from{-moz-transform:scale(); } to{-moz-transform:scale(); } }
@keyframes transform- { from{transform:scale(); } to{transform:scale(); } }
/** 23 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {animation:transform- 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:skewX(0deg); } %{-webkit-transform:skewX(30deg); } %{-webkit-transform:skewX(0deg); } %{-webkit-transform:skewX(-30deg); } to{-webkit-transform:skewX(0deg); } }
@-moz-keyframes transform- { from{-moz-transform:skewX(0deg); } %{-moz-transform:skewX(30deg); } %{-moz-transform:skewX(0deg); } %{-moz-transform:skewX(-30deg); } to{-moz-transform:skewX(0deg); } }
@keyframes transform- { from{transform:skewX(0deg); } %{transform:skewX(30deg); } %{transform:skewX(0deg); } %{transform:skewX(-30deg); } to{transform:skewX(0deg); } }
/** 24 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {animation:transform- 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:rotate(0deg) scale(); } to{-webkit-transform:rotate(360deg) scale(0.1); } }
@-moz-keyframes transform- { from{-moz-transform:rotate(0deg) scale(); } to{-moz-transform:rotate(360deg) scale(0.1); } }
@keyframes transform- { from{transform:rotate(0deg) scale(); } to{transform:rotate(360deg) scale(0.1); } }
/** 25 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {animation:transform- 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateY(0deg); } to{-webkit-transform:perspective(400px) rotateY(360deg); } }
@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateY(0deg); } to{-moz-transform:perspective(400px) rotateY(360deg); } }
@keyframes transform- { from{transform:perspective(400px) rotateY(0deg); } to{transform:perspective(400px) rotateY(360deg); } }
/** 26 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {animation:transform- 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateX(0deg); } to{-webkit-transform:perspective(400px) rotateX(360deg); } }
@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateX(0deg); } to{-moz-transform:perspective(400px) rotateX(360deg); } }
@keyframes transform- { from{transform:perspective(400px) rotateX(0deg); } to{transform:perspective(400px) rotateX(360deg); } }
/** 27 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {animation:transform- 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotateY(0deg); } to{-webkit-transform:perspective(400px) translateZ(150px) rotateY(180deg); } }
@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotateY(0deg); } to{-moz-transform:perspective(400px) translateZ(150px) rotateY(180deg); } }
@keyframes transform- { from{transform:perspective(400px) rotateY(0deg); } to{transform:perspective(400px) translateZ(150px) rotateY(180deg); } }
/** 28 **/
#transform- {-webkit-animation:transform- 2s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 2s ease 0s alternate none infinite;}
#transform- {animation:transform- 2s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{-webkit-transform:perspective(400px) translate3d(,,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg); } }
@-moz-keyframes transform- { from{-moz-transform:perspective(400px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{-moz-transform:perspective(400px) translate3d(,,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg); } }
@keyframes transform- { from{transform:perspective(400px) translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{transform:perspective(400px) translate3d(,,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg); } }
/** 29 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite;}
#transform- {animation:transform- 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotate3d(,,,0deg); } to{-webkit-transform:perspective(400px) rotate3d(,,,180deg); } }
@-moz-keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,180deg); } }
@keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,180deg); } }
/** 30 **/
#transform- {-webkit-animation:transform- 1s ease 0s alternate none infinite; -webkit-transform-origin:% % ;}
#transform- {-moz-animation:transform- 1s ease 0s alternate none infinite; -moz-transform-origin:% % ;}
#transform- {animation:transform- 1s ease 0s alternate none infinite; transform-origin:% % ;}
@-webkit-keyframes transform- { from{-webkit-transform:perspective(400px) rotate3d(,,,0deg); } to{-webkit-transform:perspective(400px) rotate3d(,,,-180deg); } }
@-moz-keyframes transform- { from{-moz-transform:perspective(400px) rotate3d(,,,0deg); } to{-moz-transform:perspective(400px) rotate3d(,,,-180deg); } }
@keyframes transform- { from{transform:perspective(400px) rotate3d(,,,0deg); } to{transform:perspective(400px) rotate3d(,,,-180deg); } }
/** 31 **/
#transform-origin {-webkit-animation:transform-origin 1s ease 0s alternate none infinite;}
#transform-origin {-moz-animation:transform-origin 1s ease 0s alternate none infinite;}
#transform-origin {animation:transform-origin 1s ease 0s alternate none infinite;}
@-webkit-keyframes transform-origin { from{-webkit-transform:% % ; -webkit-transform:rotate(0deg); } to{-webkit-transform-origin: %; -webkit-transform:rotate(45deg); } }
@-moz-keyframes transform-origin { from{-moz-transform:% % ; -moz-transform:rotate(0deg); } to{-moz-transform-origin: %; transform:rotate(45deg); } }
@keyframes transform-origin { from{transform:% % ; transform:rotate(0deg); } to{transform-origin: %; transform:rotate(45deg); } }