About the animated effect of CSS3 animate instructions for use and browser-compatible introduction

This article mainly introduces the animated effect of the CSS3 animation of the use of animate and browser-compatible introduction, has a certain reference value, now share to everyone, the need for friends can refer to

Yesterday suddenly saw Jing.fm (this music site is very good, a lot of effects I like, if you are interested, you can go to onlookers under) on the music playback, the album rotation effect is very good, so prepare to write their own, for later use. Results The first time I used animate, I met the pit Daddy thing, under the special spit Trough

Haven't updated blog for a long time, last issued (November 8) to now just one months, during the project more things, a moment feel more tight, no time to update. This week is finally over, filling in a few technical articles. Well, the first article is about the use of CSS3 animations.
Yesterday suddenly saw Jing.fm (this music site is very good, a lot of effects I like, if you are interested, you can go to onlookers under) on the music playback, the album rotation effect is very good, so prepare to write their own, for later use. As a result, the first time you use animate, you encounter the pit Daddy thing, under the special spit slot.
first, the final effect

As shown, the final is to let the album's pictures spin up, simulating the effect of recording playback (you can go to the jing.fm to see the real effect, great, now many music sites have added this effect).
second, structure code

<! DOCTYPE html> 
As you can see from the code above, because it is a powerful animation effect using CSS3, my structure definition is very simple (under the premise of semantics) without reference to a JavaScript script file.
MusicBox to limit the size of the perimeter box, the internal cover used to display the album art, this picture is the picture on the left, boxy, not a circle, so I made a mask in the back of P, it does not do other things, just to accommodate a mask (right picture), Cover the part of the picture outside the circle.
　　　　
Three, CSS3 style sheet

@charset Utf-8; /* COMMON:ROTATECD */@-webkit-keyframes myrotate{0%{-webkit-transform:rotate (0deg);} 100%{-webkit-transform:rota Te (360deg); }} @-moz-keyframes myrotate{0%{-moz-transform:rotate (0deg);} 100%{-moz-transform:rotate (360deg);} @-ms-keyfram Es myrotate{0%{-ms-transform:rotate (0deg);} 100%{-ms-transform:rotate (360deg);} @-o-keyframes myrotate{0%{-o- Transform:rotate (0DEG); } 100%{-o-transform:rotate (360deg);}} @keyframes myrotate{0%{transform:rotate (0deg);} 100%{transform:rotate (360deg);}. rotatecd{-webkit-animation:m Yrotate 9.5s Infinite Linear; -moz-animation:myrotate 9.5s Infinite Linear; -ms-animation:myrotate 9.5s Infinite Linear; -o-animation:myrotate 9.5s Infinite Linear; Animation:myrotate 9.5s Infinite Linear; -webkit-animation-play-state:running; -moz-animation-play-state:running; -ms-animation-play-state:running; -o-animation-play-state:running; animation-play-state:running; }/* MODULE:BD */#bd {width:960px;margin:200px Auto 0;} /* Module:musicbox */#musicBox {position:relative;width:430px;height:430px;margin:0 Auto;overflow:hidden;} #musicBo X. Cover{width:300px;height:300px;margin:65px;background:url (.. /img/music1.jpg) 0 0 no-repeat;} #musicBox. Mask{position:absolute;top:0;left:0;width:100%;height:100%;background:url (.. /img/playermask.png) 0 0 no-repeat;}
ROTATECD This part of the code is compatible with a variety of advanced browsers (of course, support CSS3), set the time for animation execution and some other settings, you can query the more knowledge of animate to gain insight.
For the above on the animation Keyframe KeyFrames, stepped on a lot of pits, at the beginning, I was looking at the "HTML5 and CSS3 authoritative guide" on the example, it only wrote the wording of Chrome (compared to the pit dad, I guess the author thinks that other browsers are written similar to this, So let the reader find out for themselves), I take it for granted that the compatibility rotate settings of other browsers are written, as shown in the following code:

@-webkit-keyframes myrotate{0%{-webkit-transform:rotate (0deg);-moz-transform:rotate (0deg);-ms-transform:rotate ( 0DEG); -o-transform:rotate (0DEG); Transform:rotate (0DEG); } ....
As a result, the animations under Chrome and Safari are normal, with no animations under FF, opera, or ie. In fact, this part is very good understanding, myrotate key frame just to WebKit do special instructions, other browsers simply ignore this, so there is no animation effect.
Therefore, when writing the keyframe adaptation style, be sure to write the following form:

@-webkit-keyframes myrotate{0%{-webkit-transform:rotate (0deg);} ... @-moz-keyframes myrotate{0%{-moz-transform:ro Tate (0DEG); } ... @-ms-keyframes myrotate{0%{-ms-transform:rotate (0deg);} ... @-o-keyframes myrotate{0%{-o-transform:rotate (0 DEG); } ... @keyframes myrotate{0%{transform:rotate (0deg);} ...
The Opera browser also has a very strange place, it favors @keyframes myrotate{...}, and to @-o-keyframes myrotate{...} Do not have a cold, so you find the two only one time, the former can achieve animation, the latter cannot achieve animation effect. I have been very puzzled about this, and later found the introduction about opera, said it is strict implementation of the Web standards. Think about it and understand why it is so favored by @keyframes myrotate{...} The
Iv. Summary
CSS3 looks very good, but there is still a lot of uncertainty in the actual use. If you can't see the code template that you've implemented, it's hard to be sure your code is formatted correctly. So you can go to some good sites to observe the various animation effects, choose your favorite animation and generate code, download and then follow your own requirements to write animation code. This will make your animation effect more effective (don't worry about it not to meet your requirements, there are a lot of effects, you can mix, as long as your imagination is rich enough).
Well, here's the end of the article.
PS: The browser used in this article is Chrome (21.0.1180.15), safari5.1.7 (7534.57.2), opera (12.11), FF (17.0.1) and IE10 (10.0.9200.16438).

 The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!