Simple css animation and css Animation

Simple css animation and css Animation

In the past few days, the company needs to update a mobile web page, because the task is simple, it will be handed over to me as a newbie. The first time I came into contact with css, I learned it with html when I first got into my freshman year in 14 years, and I never touched it again. So I had to complete Task B while learning.

Structure: Create a folder named "main" under the WebContent directory of the java web project, and then create two subfolders in the folder, css (storing css files), img (storing images ), as for html files, put them in the main folder.

In the html file, do not forget to go To the  

The overall layout in css is boring. Let's talk about the animation settings.

. Logo {position: absolute; width: 86%; left: 6%; height: 33%; z-index: 3; top: 50%; background: url (.. /img/test.png) no-repeat top center; background-size: contain; animation: bounceInUp. 7 s running 0 s normal both;-moz-animation: bounceInUp. 7 s running 0 s normal both;-webkit-animation: bounceInUp. 7 s running 0 s normal both;-o-animation: bounceInUp. 7 s limit 0 s normal both;} section. active. logo {animation: bounceInUp. 7 s running 0 s normal both;-moz-animation: bounceInUp. 7 s running 0 s normal both;-webkit-animation: bounceInUp. 7 s running 0 s normal both;-o-animation: bounceInUp. 7 s running 0 s normal both;} @ keyframes bounceInUp {0% {top:-30%;} 40% {top: 55%;} 60% {top: 30%;} 80% {top: 45%;} 100% {top: 50%; }}@-webkit-keyframes bounceInUp/* Safari Chrome */{0% {top:-30%;} 40% {top: 55%;} 60% {top: 30%;} 80% {top: 45%;} 100% {top: 50% ;}} @-moz-keyframes bounceInUp/* Firefox */{0% {top:-30%;} 40% {top: 55%;} 60% {top: 30%;} 80% {top: 45%;} 100% {top: 50%; }}@-o-keyframes bounceInUp/* bounceInUp */{0% {top:-30%;} 40% {top: 55% ;} 60% {top: 30%;} 80% {top: 45%;} 100% {top: 50% ;}}

　　

. Logo {...} contains all the css styles related to an image,

The position attribute is used to specify the positioning type of an element. The value of absolute is to generate an absolute positioning element;

Width and height are used to set the width and height of an image. Note that when the width and height are not set for the image, the image itself will not support the element;

Left (/right) is used to specify the image and the left Border (/right border.

Z-index is used to specify the order in which images are stacked. The larger the value behind the image, the image will be displayed at the beginning (that is, the image will not be overwritten by other images );

Top specifies the distance between the image and the upper border;

Background: url (../img/2.png); specifies the path of the image to be used

Background-repeat: Indicates whether to repeat the image. Generally, the default value is "no-repeat ".

The background-size attribute sets the size and size of the image background.

The last four sentences in the. logo {...} are the settings of the image animation. here we need to understand the syntax of the animation attribute:

Animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Its role is:
Animation (Declaration): animation name: animation completion time motion path Delay Time playback times whether reverse playback the element style used when the animation is not played, specify whether the animation is running or paused
At this time, some people will say why the same syntax should be repeated four times? Because some Browsers Do not support keyframes rules, they must be replaced by the corresponding support in the browser.
@ Keyframes bounceInUp {...}
@-Webkit-keyframes bounceInUp {...}
@-Moz-keyframes bounceInUp {...}
@-O-keyframes bounceInUp {...}
The content in these four statement blocks is also identical, of which 0%, 40%, 60%, 80% {}, 100% {} specifies the position when the animation of the image is completed to the percentage progress of the overall animation, because I am using the bounceInUp animation, that is, going from top to bottom, therefore, top is used to specify the image position.

Finally, call the external css style statement in html, and add <div class = "logo"> </div> to <body>... </body> to call the animation.