Home > Others

CSS3 Dynamic Effect Learning Notes

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

@keyframe specified animation
It's usually used with animation.

Animation: Specify the animation of the name of the animation time specified animation speed curve.
@keyframe define the name of the animation {The percentage of the animation's length. {One or more legitimate CSS style properties}}

At present, most browsers do not support @keyframe and animation, so write in a browser
@keyframe
1.safari and Chrome Browsers
@-webkit-keyframes myfrom{
from {top:0;}
to {top:200px;}
}

2.Firefox Browser
@-moz-keyframes myfrom{
from {top:0;}
to {top:200px;}
}

3.Opera Browser
@-o-keyframes myfrom{
from {top:0;}
to {top:200px;}
}

Animation
1.safari and Chrome Browsers
@-webkit-animation:myfrom 5s Infinite
2.Firefox Browser
@-moz-animation:myfrom 5s Infinite
2.Opera Browser
@-o-animation:myfrom 5s Infinite

Example

The code is as follows Copy Code

<! DOCTYPE html>
&LT;TITLE&GT;CSS3 Dynamic Effect demo</title>
<meta charset= "Utf-8" >
<meta name= "keyword" content= "CSS3 Dynamic Effect Demo" >
<meta name= "description" content= "CSS3 Dynamic Effect Demo" >
<meta name= "Author" content= "Rong Sir" >
<link rel= "stylesheet" type= "Text/css" href= "Css.css" >
<body>
<div class= "Main" >
<div class= "cont" >
<div class= "Cont1 Conns" >
Animation
Animation properties
@keyframes:
Specify animation
</div>
<span data= "1" > Source code </span>
</div>
<div class= "cont" >
<div class= "Cont2 Conns" >
Animation-delay:
Specify when the animation starts
</div>
<span data= "2" > Source code </span>
</div>
<div class= "cont" >
<div class= "Cont3 Conns" >
Animation-iteration-count:
Specify the number of animations
</div>
<span data= "3" > Source code </span>
</div>
<div class= "cont" >
<div class= "Cont4 Conns" >
Animation-direction:
Set the next animation in reverse
</div>
<span data= "4" > Source code </span>
</div>
<div class= "cont" >
<div class= "Cont5 Conns" >
</div>
<span data= "5" > Source code </span>
</div>
<div class= "cont" >
<div class= "Cont6 Conns" >

</div>
<span data= "6" > Source code </span>
</div>
<div class= "cont" >
<div class= "Cont7 Conns" >

</div>
<span data= "7" > Source code </span>
</div>
<div class= "cont" >
<div class= "Cont8 Conns" >

</div>
<span data= "8" > Source code </span>
</div>
</div>
<div class= "Overbody hidden" ></div>
<div class= "Commom" id= "Show1" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "Cont1 conns" &gt;animation-delay: Specify when the animation starts &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
Body{background-color: #000;}
. cont{
border:1px solid #fff;
Float:left;
width:250px;
height:250px;
position:relative;
Box-sizing:border-box;
}
. conns{white-space:initial;}
. cont a{
Position:absolute;
top:50px;
left:5px;
Color: #e3e3e3;
Word-wrap:break-word;
Display:block;
width:5px;
Text-decoration:none;
}
. cont1{
width:100px;
height:80px;
margin:0 Auto;
Background-color: #999;
Color: #fff;
padding:10px;
position:relative;
Overflow:hidden;
Animation:myfrom 5s Infinite;
-webkit-animation:myfrom 5s Infinite;
}
@-webkit-keyframes myfrom{
from {top:0;}
to {top:150px;}
}
@keyframes myfrom{
from {top:0;}
to {top:150px;}
}</textarea>
</div>
<div class= "Commom" id= "Show2" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "Cont2 Conns" &gt;animation animation properties, @keyframes: Specify animation &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
. cont2{
width:80px;
height:80px;
margin:0 Auto;
Background-color: #999;
Color: #fff;
padding:10px;
position:relative;
Overflow:hidden;
Animation:myfrom 5s Infinite;
-webkit-animation:myfrom 5s Infinite;
Animation-delay:2s;
-webkit-animation-delay:2s;
}
The rest of the CSS with the first
</textarea>
</div>
<div class= "Commom" id= "SHOW3" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "Cont3 conns" &gt;animation-iteration-count: Specify the number of animations &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
. cont3{
width:80px;
height:80px;
margin:0 Auto;
Background-color: #999;
Color: #fff;
padding:10px;
position:relative;
Overflow:hidden;
Animation:myfrom 5s Infinite;
-webkit-animation:myfrom 5s Infinite;
Animation-iteration-count:2;
-webkit-animation-iteration-count:2;
}
The rest of the CSS with the first
</textarea>
</div>
<div class= "Commom" id= "Show4" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "Cont4 conns" &gt;animation-direction: Specify next animation reverse &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
. cont4{
width:80px;
height:80px;
margin:0 Auto;
Background-color: #999;
Color: #fff;
padding:10px;
position:relative;
Overflow:hidden;
Animation:myfrom 5s Infinite;
-webkit-animation:myfrom 5s Infinite;
Animation-direction:alternate;
-webkit-animation-direction:alternate;}
The rest of the CSS with the first
</textarea>
</div>
<div class= "Commom" id= "show5" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "Cont5 Conns" &gt; &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
. cont5{
Margin:6em Auto;
font-size:10px;
position:relative;
Border:1.1em Solid Rgba (255, 255, 255, 0.2);
Border-left:1.1em solid #ffffff;
-WEBKIT-ANIMATION:CONT5 1.1s Infinite Linear;
ANIMATION:CONT5 1.1s Infinite Linear;
}
. cont5,.cont5:after{
border-radius:50%;
Width:10em;
Height:10em;
}
@keyframes cont5{
From {-webkit-transform:rotate (0deg); transform:rotate (0deg);}
to {-webkit-transform:rotate (360deg); transform:rotate (360deg);}
}
@-webkit-keyframes cont5{
From {-webkit-transform:rotate (0deg); transform:rotate (0deg);}
to {-webkit-transform:rotate (360deg); transform:rotate (360deg);}
}</textarea>
</div>
<div class= "Commom" id= "SHOW6" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "Cont6 Conns" &gt; &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
Body{background-color: #000;}
. cont6{
height:120px;
width:120px;
margin:50px Auto;
border-radius:50%;
Background:linear-gradient (left, #fff, #000);
Background:-webkit-linear-gradient (left, #fff 10%,rgba (255,255,255,0) 40%);
Background:-moz-linear-gradient (left, #fff 10%,rgba (255,255,255,0) 40%);
Background:-o-linear-gradient (left, #fff 10%,rgba (255,255,255,0) 40%);
Background:-ms-linear-gradient (left, #fff 10%,rgba (255,255,255,0) 40%);
position:relative;
-webkit-animation:cont6 1.1s Infinite Linear;
Animation:cont6 1.1s Infinite Linear;
}
. cont6:before{
height:50%;
width:50%;
Background: #fff;
Content: ';
Display:block;
border-radius:100% 0 0 0;
Position:absolute;
top:0;
left:0;
}
. cont6:after{
height:75%;
width:75%;
Margin:auto;
Background: #000;
Content: ';
Display:block;
border-radius:50%;
Position:absolute;
top:0;left:0;
right:0;
bottom:0;
}
@keyframes cont6{
From {-webkit-transform:rotate (0deg); transform:rotate (0deg);}
to {-webkit-transform:rotate (360deg); transform:rotate (360deg);}
}
@-webkit-keyframes cont6{
From {-webkit-transform:rotate (0deg); transform:rotate (0deg);}
to {-webkit-transform:rotate (360deg); transform:rotate (360deg);}
}</textarea>
</div>
<div class= "Commom" id= "Show7" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "cont7 Conns" &gt; &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
Body{background-color: #000;}
. cont7,.cont7:before,.cont7:after{
height:25px;
width:25px;
border-radius:50%;
Animation:cont7 1.8s Infinite ease-in-out;
-webkit-animation:cont7 1.8s Infinite ease-in-out;
}
. cont7{
position:relative;
top:0;
margin:80px Auto;
Animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
. cont7:before{
Content: ';
Position:absolute;
Left: -50px;
}
. cont7:after{
Content: ';
Position:absolute;
left:50px;
animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
@keyframes cont7{
0%,
80%,
100% {box-shadow:0 2.5em 0-1.3em #ffffff;}
40% {box-shadow:0 2.5em 0 0 #FFF;}
}
@-webkit-keyframes cont7{
0%,
80%,
100% {box-shadow:0 2.5em 0-1.3em #ffffff;}
40% {box-shadow:0 2.5em 0 0 #FFF;}
}</textarea>
</div>
<div class= "Commom" id= "Show8" >
<textarea readonly= "readonly" class= "Tip" style= "border-bottom:1px solid #000;" >&lt;div class= "Cont8 Conns" &gt; &lt;/div&gt;</textarea>
<textarea readonly= "readonly" class= "Tipcss" >
Body{background-color: #000;}
. cont8{
width:96px;
height:48px;
border-radius:50%;
border-bottom:50px solid #fff;
border-top:2px solid #fff;
border-left:2px solid #fff;
border-right:2px solid #fff;
position:relative;
top:0;
margin:80px Auto;
}
. cont8:before{
Content: ';
Position:absolute;
width:12px;
height:12px;
border-radius:50%;
border:18px solid #000;
top:21px;
Background-color: #fff;
left:0;
}
. cont8:after{
Content: ';
Position:absolute;
width:12px;
height:12px;
border-radius:50%;
border:18px solid #fff;
top:21px;
Background-color: #000;
right:0;
}</textarea>
</div>
<script type= "Text/javascript" src= "Jquery-1.11.1.min.js" ></script>
<script type= "Text/javascript" src= "Show.js" ></script>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More