Detailed explanation of examples of animation in CSS3

1: Detailed explanation of animation parameters

Since the animation animation was used above, here is a detailed introduction to the parameters of this animation.

Introduction

CSS animation (Animations) is simply to secretly change one or some of its CSS values ​​within a certain frequency within a fixed animation time, thereby achieving visual transformation. Animation effects. Many aspects of Animations can be controlled, including animation running time, start value and end value, as well as animation pause and delay its start time, etc.

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 '>: Retrieve or set The name of the animation applied to the object
<' animation-duration '>: Retrieve or set the duration of the object animation
<' animation-timing-function '>: Retrieve or set the transition type of object animation
##< ' animation-delay '>: Retrieve or set the time of object animation delay
<' animation-iteration-count '>: Retrieve or set the number of cycles of object animation
<' animation-direction '>: Retrieve or set Whether the object animation moves in reverse in the loop
<' animation-fill-mode '>: Retrieve or set the object animation time outside The state
<' animation-play-state '>: Retrieves or sets the state of the object animation. w3c is considering whether to remove this attribute, because the state of animation can be achieved in other ways, such as resetting the style

animation

Abbreviation attribute for all animation attributes , except animation-play-state attribute.

animation-name

Specifies the name of @keyframes animation. It is the animation name followed by @keyframes.

animation-duration

Specifies the seconds or milliseconds it takes for the animation to complete one cycle. The default is 0.

animation-timing-function

Specifies the speed curve of animation. The default is "ease".

Common animation speed parameters:

1. linear: linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)

2. ease: smooth transition. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)

3. ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)

4. ease-out: from fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)

5. ease-in-out: from slow to fast and then to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)

6. step-start: Equivalent to steps(1, start)

7. step-end: Equivalent to steps(1, end)

##steps([, [ start | end ] ]?): A step function that accepts two parameters . The first parameter must be a positive integer specifying the number of steps of the function. The value of the second parameter can be start or end, specifying the time point when the value of each step changes. The second parameter is optional and the default value is end.

8. ##cubic-bezier(, , , ): Specific Bezier curve type, 4 values ​​​​need to be in [0, 1]

9. animation-delay

specifies when the animation starts. The default is 0. That is to say, it refers to the delayed execution time of animation.

animation-iteration-count

Specifies the number of times the animation is played. The default is 1. Of course, we can set it 2 times, 3 times, and so on. There is also a wireless loop keyword

infinite

, which means the animation is played repeatedly in a loop.

animation-direction

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

##reverse
1. :

   Run in the opposite direction

alternate
2. ：

   The animation first runs normally and then runs in the opposite direction, and continues to run alternately

   ##alternate-reverse
：
3. The animation first runs in the reverse direction and then in the forward direction, and continues to run alternately

animation-fill-mode

Specifies the state of the object outside of the animation time.

1. none: Default value. Do not set the state of the object outside of the animation

2. forwards：Set the object state to the state at the end of the animation

3. ##backwards：Set the object state to the state when the animation starts

4. both：Set the object status to the end or start state of the animation. Before the animation starts, it is the "from" or "0%" keyframe; the animation is completed After that comes the "to" or "100%" keyframe state.

animation-play-state

Specifies whether the animation is running or paused. The default is

"running". There is also a value paused: paused.

Two: animation animation example

Instance one 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 two 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 和 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;}}

Instance three, implemented using js+Transform and Animation 3D animation

Sample address:

Only browsers with webkit core can see the relevant 3D animation effects.

The effect is shown in the figure:

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);

The above is the detailed content of Detailed explanation of examples of animation in CSS3. For more information, please follow other related articles on the PHP Chinese website!