CSS Simple animations

Source: Internet
Author: User

These days the company needs to update a mobile Web page, because the task is simple, I will be given as a rookie newcomer to do. The first contact with CSS was in 14 when I was a freshman in the same time with HTML learning, and then never contacted. So I had to study and finish the task (⊙﹏⊙) b

Structure: Create a folder named "Main" under the WebContent directory in the Java Web project, create two subfolders in the folder, CSS (store CSS files), IMG (Store the image), and the HTML file in the main folder.

In the HTML file, do not forget to add <link rel= "stylesheet" href= "Main/css/test.css" to Type= "Text/css" in

The overall layout of the CSS is boring, just 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. 7s ease 0s normal both;    -moz-animation:bounceinup. 7s ease 0s normal both;    -webkit-animation:bounceinup. 7s ease 0s normal both; -o-animation:bounceinup. 7s ease 0s normal both;} Section.active. logo{animation:bounceinup. 7s ease 0s normal both;-moz-animation:bounceinup. 7s ease 0s normal both;-web Kit-animation:bounceinup. 7s ease 0s normal both;-o-animation:bounceinup. 7s ease 0s normal both;} @keyframes bounceinup{0% {top:-30%;} 40%{top:55%;} 60%{top:30%;} 80%{top:45%;} 100% {top:50%;}} @-webkit-keyframes Bounceinup/* Safari tel? 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 the associated CSS style for all of a picture,

The Position property is used to specify the positioning type of the element, and the absolute value is the element that generates the absolute position;

Width,height is to set the width of the picture, it should be noted here, when the picture is not set wide, the picture itself will not open the elements;

Left (/right) is used to specify the picture with the border (/right border).

The z-index is used to specify the order in which the image is stacked, and the larger the value behind it, the image is displayed at the top (i.e. not covered by other images);

TOP specifies the distance from the top border of the picture;

Background:url (.. /img/2.png); Specifies the path to the picture used

Background-repeat: property indicates whether to make the picture repeat, in general the default is "No-repeat" is not repeated

Background-size property sets the size size of the picture background

In the. logo{...} The last four sentences are the setting of the animation of the picture, where we need to understand the syntax of the animated animation property:

        Animation:   name    duration    timing-function     delay    iteration-count    direction    Fill-mode     play-state;
Its corresponding role is:
Animation (Declaration): Animation name Animation completion time motion path delay time played whether reverse play the element style to use when the animation is not playing Specifies whether the animation is running or paused
At this point, someone will say why the same sentence syntax to repeat four times? Because some browsers do not support keyframes rules, they are replaced with support in the appropriate browser, so
@keyframes bounceinup{...}


@-o-keyframes bounceinup{...}
The contents of these four statement blocks are exactly the same, where the 0%{},40%{},60%{},80%{},100%{} specifies where the animation of the picture is at the completion of the percentage progress of the overall animation, because I am using the Bounceinup animation, which is entered from the top down, So it uses top to specify the position of the picture

Finally call the external CSS style statement in the HTML, add <div class= "logo" ></div> can call the animation in the <body>...</body>

CSS Simple animations

Related Article

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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