Instructions for using css3 animation effect animate and introduction to browser compatibility-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Instructions for using css3 animation effect animate and introduction to browser compatibility

不言

Jun 22, 2018 pm 01:43 PM

animatecss3 animationBrowser compatible

This article mainly introduces the usage instructions and browser compatibility of CSS3 animation effect animate. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Yesterday Suddenly I saw jing.fm (this music website is very good, I like many of the effects. If you are interested, you can check it out). When the music is played, the album rotation effect is very good, so I am going to write it down myself. Reserve for later use. As a result, I encountered a cheating thing when I used animate for the first time. I am complaining that I haven’t updated my blog for a long time. It has been exactly a month since I last posted (November 8th), and during this period, there were many things on the project. I felt that time was tight and I didn't have time to update. This week has finally come to an end, and I will add a few technical articles. Well, the first article is about the use of css3 animation.

Yesterday I suddenly saw jing.fm (this music website is very good, I like many of the effects. If you are interested, you can check it out). When playing music, the album rotation effect is very good, so I am ready to do it myself. Write it down for later use. As a result, I encountered a cheating thing the first time I used animate, so I complained about it.

1. The final effect

As shown in the picture above, the ultimate goal is to make the album picture rotate to simulate the effect of record playback (you can go to jing Check out the real effect on .fm, it’s great, now many music websites have added this effect).
2. Structural code

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=&#39;utf-8&#39;> 
<title>音乐专辑播放模拟</title> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 
<p id="bd"> 
<p id="musicBox"> 
<p class="cover rotateCD"></p> 
<p class="mask"></p> 
</p> 
</p> 
</body> 
</html>

As can be seen from the above code, because it uses the powerful animation effect of css3, my structure definition is very simple (in Under the premise of conforming to the semantics), at the same time, it does not reference the javascript script file.

musicBox is used to limit the size of the outer frame, and the internal cover is used to display the album cover picture. This picture is like the picture on the left of the picture below. It is boxy and not round, so I made a mask p at the back. , it does nothing else but is used to hold a mask (right picture below) to cover the part outside the circle of the picture.

　　
3. css3 style sheet

@charset utf-8; 
/* common: rotateCD */ 
@-webkit-keyframes myrotate{ 
0%{ 
-webkit-transform : rotate(0deg); 
} 
100%{ 
-webkit-transform : rotate(360deg); 
} 
} 
@-moz-keyframes myrotate{ 
0%{ 
-moz-transform : rotate(0deg); 
} 
100%{ 
-moz-transform : rotate(360deg); 
} 
} 
@-ms-keyframes 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: myrotate 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;} 
#musicBox .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 it supports css3 ), set the animation execution time and some other settings, you can query animate for more knowledge to learn more.

Regarding the above writing method of animation keyframes, I stepped on a lot of pitfalls. At first, I looked at the examples in "The Definitive Guide to HTML5 and CSS3", which only wrote the writing method under chrome (which is quite cheating, My guess is that the author thinks that other browsers are written in a similar way, so readers can explore for themselves). I took it for granted and wrote the compatibility rotate settings of other browsers, 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); 
} 
....

The result of this is that the animation is normal under chrome and safari, but there is no animation under FF, opera and IE. In fact, this part is easy to understand. The key frames of myrotate only provide special instructions for webkit. Other browsers simply ignore it, so there is no animation effect.

Therefore, when we write the keyframe adaptation style, we must write it in the following form:

@-webkit-keyframes myrotate{ 
0%{ 
-webkit-transform : rotate(0deg); 
} 
... 
@-moz-keyframes myrotate{ 
0%{ 
-moz-transform : rotate(0deg); 
} 
... 
@-ms-keyframes myrotate{ 
0%{ 
-ms-transform : rotate(0deg); 
} 
... 
@-o-keyframes myrotate{ 
0%{ 
-o-transform : rotate(0deg); 
} 
... 
@keyframes myrotate{ 
0%{ 
transform : rotate(0deg); 
} 
...

There is another weird thing about the opera browser. It prefers @keyframes myrotate{ ...}, but are not interested in @-o-keyframes myrotate{...}, so you find that when only one of the two is saved, the former can achieve animation, but the latter cannot achieve animation effects. I have always been puzzled by this, and then I found an introduction to opera, saying that it strictly implements W3C web standards. Thinking about it this way, you can understand why it prefers @keyframes myrotate{...} so much.

4. Summary
css3 looks very good, but there are still many uncertainties in actual use. If you can't see the implemented code template, it's difficult to be sure that your code format is correct. So you can go to some good websites to observe various animation effects, choose the animation you like and generate code, download it and then write the animation code according to your own needs. This will make your animation effects more efficient and effective (don’t worry if it doesn’t meet your requirements, there are many effects above, you can combine them yourself, as long as your imagination is rich enough). Okay, this article ends here.

PS
: The browsers used in this article are 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 entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use Flexbox to achieve the centering effect in CSS

How to use css3 to achieve the color gradient glow effect of the input input box

The above is the detailed content of Instructions for using css3 animation effect animate and introduction to browser compatibility. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Weekly Platform News: Web Apps in Galaxy Store, Tappable Stories, CSS SubgridApr 14, 2025 am 11:20 AM

In this week's roundup: Firefox gains locksmith-like powers, Samsung's Galaxy Store starts supporting Progressive Web Apps, CSS Subgrid is shipping in Firefox

Weekly Platform News: Internet Explorer Mode, Speed Report in Search Console, Restricting Notification PromptsApr 14, 2025 am 11:15 AM

In this week's roundup: Internet Explorer finds its way into Edge, Google Search Console touts a new speed report, and Firefox gives Facebook's notification

The Power (and Fun) of Scope with CSS Custom PropertiesApr 14, 2025 am 11:11 AM

You’re probably already at least a little familiar with CSS variables. If not, here’s a two-second overview: they are really called custom properties, you set

We Are ProgrammersApr 14, 2025 am 11:04 AM

Building websites is programming. Writing HTML and CSS is programming. I am a programmer, and if you're here, reading CSS-Tricks, chances are you're a

How Do You Remove Unused CSS From a Site?Apr 14, 2025 am 10:59 AM

Here's what I'd like you to know upfront: this is a hard problem. If you've landed here because you're hoping to be pointed at a tool you can run that tells

An Introduction to the Picture-in-Picture Web APIApr 14, 2025 am 10:57 AM

Picture-in-Picture made its first appearance on the web in the Safari browser with the release of macOS Sierra in 2016. It made it possible for a user to pop

Ways to Organize and Prepare Images for a Blur-Up Effect Using GatsbyApr 14, 2025 am 10:56 AM

Gatsby does a great job processing and handling images. For example, it helps you save time with image optimization because you don’t have to manually

Oh Hey, Padding Percentage is Based on the Parent Element's WidthApr 14, 2025 am 10:55 AM

I learned something about percentage-based (%) padding today that I had totally wrong in my head! I always thought that percentage padding was based on the

See all articles