CSS3 animation attributes: animation (animation), css3animation

CSS3 animation attributes: animation (animation), css3animation
I. animation Parameters

Because the animation is used above, we will introduce the parameter of this animation in detail here.

Introduction

In short, CSS animation (Animations) is to secretly change one or more of its CSS values within a certain frequency within a fixed animation time, so as to achieve visual conversion animation effect. Animation can be controlled in many aspects, including the animation running time, start value and end value, as well as the animation pause and delay start time.

Syntax

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<' animation-name '>: Retrieves or sets the animation name applied to an object.
<' animation-duration '>: Retrieves or sets the duration of an object animation.
<' animation-timing-function '>: Retrieves or sets the transition type of an object animation.
<' animation-delay '>: Retrieves or sets the animation delay time of an object.
<' animation-iteration-count '>: Retrieves or sets the number of cycles of an object animation.
<' animation-direction '>: Retrieves or sets whether the object animation is reversely moved in a loop.
<' animation-fill-mode '>: Retrieves or sets the State beyond the animation time of an object.
<' animation-play-state '>: Retrieves or sets the animation status of an object. W3c is considering whether to remove this attribute because the animation state can be implemented in other ways, such as resetting the style.

Animation

The short attribute of all animation properties except the animation-play-state attribute.

Animation-name

Specifies the name of the keyframes animation. The name of the animation followed by @ keyframes.

Animation-duration

Specifies the seconds or milliseconds that an animation takes to complete a cycle. The default value is 0.

Animation-timing-function

Specifies the animation speed curve. The default value is "renew ".

Common animation speed parameters:

Animation-delay

Specifies when the animation starts. The default value is 0. That is, the animation delay execution time.

Animation-iteration-count

Specifies the number of times an animation is played. The default value is 1. Of course, we can set 2, 3, and recurrence in sequence. There is also a wireless loop keywordinfiniteThat is, the animation is played repeatedly.

Animation-direction

Specifies whether the animation is played reversely in the next cycle. The default value is "normal ". Of course, there are also the following values:

Animation-fill-mode

Specifies the State beyond the animation time of an object.

Animation-play-state

Specifies whether the animation is running or paused. The default value is"running". Another Valuepaused: Paused.

Ii. animations Instance 1 usagefrom to:

div{    width:100px;    height:100px;    background:red;    position:relative;    animation:mymove 5s infinite;    -moz-animation:mymove 5s infinite; /*Firefox*/    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/}@keyframes mymove{    from {left:0px;}    to {left:200px;}}@-moz-keyframes mymove { /*Firefox*/    from {left:0px;}    to {left:200px;}}@-webkit-keyframes mymove{ /*Safari and Chrome*/    from {left:0px;}    to {left:200px;}}

Instance 2 usage percentage:

@ Keyframes myfirst {0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px ;}} @-moz-keyframes myfirst {/* Firefox */0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px; }}@-webkit-keyframes myfirst {/* Safari and Chrome */0% {background: red; left: 0px; top: 0px ;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px; }}@-o-keyframes myfirst {/* Opera */0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px ;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px ;}}

Example 3: Use js + Transform and Animation to implement 3D Animation

Example address: https://webkit.org/blog-files/3d-transforms/poster-circle.html

Only the webkit kernel browser can see the relevant 3D animation effect.

Effect:

Css code:

body {        font-family: 'Lucida Grande', Verdana, Arial;        font-size: 12px;      }      #stage {        margin: 150px auto;        width: 600px;        height: 400px;        -webkit-perspective: 800;      }      #rotate {        margin: 0 auto;        width: 600px;        height: 400px;        -webkit-transform-style: preserve-3d;        -webkit-animation-name: x-spin;        -webkit-animation-duration: 7s;        -webkit-animation-iteration-count: infinite;        -webkit-animation-timing-function: linear;      }      .ring {        margin: 0 auto;        height: 110px;        width: 600px;        -webkit-transform-style: preserve-3d;        -webkit-animation-iteration-count: infinite;        -webkit-animation-timing-function: linear;      }            .ring > :nth-child(odd) {        background-color: #995C7F;      }      .ring > :nth-child(even) {        background-color: #835A99;      }      .poster {        position: absolute;        left: 250px;        width: 100px;        height: 100px;        opacity: 0.7;        color: rgba(0,0,0,0.9);        -webkit-border-radius: 10px;      }            .poster > p {        font-family: 'Georgia', serif;        font-size: 36px;        font-weight: bold;        text-align: center;        margin-top: 28px;      }      #ring-1 {        -webkit-animation-name: y-spin;        -webkit-animation-duration: 5s;      }      #ring-2 {        -webkit-animation-name: back-y-spin;        -webkit-animation-duration: 4s;      }      #ring-3 {        -webkit-animation-name: y-spin;        -webkit-animation-duration: 3s;      }      @-webkit-keyframes x-spin {        0%    { -webkit-transform: rotateX(0deg); }        50%   { -webkit-transform: rotateX(180deg); }        100%  { -webkit-transform: rotateX(360deg); }      }      @-webkit-keyframes y-spin {        0%    { -webkit-transform: rotateY(0deg); }        50%   { -webkit-transform: rotateY(180deg); }        100%  { -webkit-transform: rotateY(360deg); }      }      @-webkit-keyframes back-y-spin {        0%    { -webkit-transform: rotateY(360deg); }        50%   { -webkit-transform: rotateY(180deg); }        100%  { -webkit-transform: rotateY(0deg); }      }

Html code:

<div id="stage">  <div id="rotate">    <div id="ring-1" class="ring"></div>    <div id="ring-2" class="ring"></div>    <div id="ring-3" class="ring"></div>  </div></div>

Js Code:

const POSTERS_PER_ROW = 12;const RING_RADIUS = 200;function setup_posters (row){    var posterAngle = 360 / POSTERS_PER_ROW;    for (var i = 0; i < POSTERS_PER_ROW; i ++) {      var poster = document.createElement('div');      poster.className = 'poster';            var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)';      poster.style.webkitTransform = transform;            var content = poster.appendChild(document.createElement('p'));      content.textContent = i;      row.appendChild(poster);    }}function init (){    setup_posters(document.getElementById('ring-1'));    setup_posters(document.getElementById('ring-2'));    setup_posters(document.getElementById('ring-3'));}window.addEventListener('load', init, false);

Reference address:
CSS Reference Manual: animation