Home > Developer > JavaScript
Css3 animation, css3animation
Animation: animation
Animations seems to work only on webkit and moz core browsers.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> animation </title>
<Style type = "text/css">
@-Moz-keyframes resize {
0% {
Padding: 0;
}
50% {
Padding: 0 20px;
Background-color: rgba (190,206,235, 0.2 );
}
100% {
Padding: 0 100px;
Background-color: rgba (190,206,235, 0.9 );
}
}
/* Safari and Chrome */
@-Webkit-keyframes resize {
0% {
Padding: 0;
}
50% {
Padding: 0 20px;
Background-color: rgba (190,206,235, 0.2 );
}
100% {
Padding: 0 100px;
Background-color: rgba (190,206,235, 0.9 );
}
}
. Anim_box: hover {
-Moz-animation-name: resize;/* name the animation */
-Moz-animation-duration: 1.5 s;/* specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0. */
-Moz-animation-iteration-count: 4;/* the animation is only executed four times when the mouse is hovering. */
-Moz-animation-direction: alternate;/* specifies whether the animation is played reversely in the next cycle. The default value is "normal ". */
-Moz-animation-timing-function: animation-in-out;/* specifies the animation speed curve. The default value is "renew ". */
-Webkit-animation-name: resize;
-Webkit-animation-duration: 1.5 s;
-Webkit-animation-iteration-count: 4;
-Webkit-animation-direction: alternate;
-Webkit-animation-timing-function: Allow-in-out;
}
. Test_box {width: 100px; height: 100px; background-color: rgba (190,206,235, 1); border: 1px solid black ;}
</Style>
</Head>
<Body>
<Div class = "anim_box test_box"> </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
