Teach you step by step how to use CSS3 to achieve animation effects (code sharing)

Previous article "H5: Several ways to implement animation on the page? (Attached code) ", let you know several ways to implement animation in the page. The following article will introduce to you how to use CSS3 to achieve a simple and beautiful animation effect. Let’s take a look at

to review CSS3 animation. I almost can’t write anymore. I liked it very much at that time. Flash, it’s a pity that times are moving forward. Just treat this article as a document

Browser support

Internet Explorer 10, Firefox and Opera support the animation attribute.

Safari and Chrome support an alternative -webkit-animation attribute.

Note: Internet Explorer 9 and earlier versions do not support the animation property.

Definition and usage

The animation property is a shorthand property for setting six animation properties:

• animation-name

• animation-duration

• ##animation-timing-function animation-delay

• animation-iteration-count animation-direction

##Syntax

animation: name duration timing-function delay iteration-count direction;

Value##animation-timing-functionSpecifies the speed curve of animationCan The values ​​are linear, ease (fade in and out), ease-in, ease-out, ease-in-out, cubic-bezier(n, n, n, n)animation -play-state Specifies whether the animation is running or paused. paused represents the paused state, running represents the running stateanimation-nameSpecifies the keyframe name that needs to be bound to the selector@keyframe { from {opcity:0} to {opcity:1}}animation-iteration-countSpecifies the number of times the animation should be playedThe optional value is infinite (infinite times) n (such as 5 times) animation-fill-mode Before or after the animation is played, its animation Whether the effect is visible. none (default) / forwards (after the animation is completed) / backwards (before the animation is displayed) / both (both);animation-duration Specifies the time it takes to complete the animation, in seconds or milliseconds Must be specified otherwise, the animation will not be executed animation-direction Specifies whether the animation should be played in reverse in turnThe default value is normal, alternate means that the animation should be played in reverse in turn. left and right#animation-delaySpecifies the delay before the animation starts Defines the time to wait before the animation starts, in seconds or milliseconds. The default value is 0. The unit is sAbout the definition of keyframe

Description	Remarks

Firefox supports alternative @-moz -keyframes rules;

• 
  

  Opera supports alternative @-o-keyframes rules;

• 
  ##Safari and Chrome support alternatives @-webkit-keyframes rules;

• 
  value supports 0-100% and from, to.

• @keyframes move {
    0% {
      top: 0px;
      left: 0px;
    }
    25% {
      top: 200px;
      left: 200px;
    }
    50% {
      top: 100px;
      left: 100px;
    }
    75% {
      top: 200px;
      left: 200px;
    }
  
    100% {
      top: 0px;
      left: 0px;
    }
  }
  
  @keyframes move {
    from {
      top: 0px;
      left: 0px;
    }
    to {
      top: 0px;
      left: 100px;
    }
  }

  demo Wrote an example, the earth revolves around the sun

The following is the code

<!-- html 部分 -->
<div style="width:700px; ">
  <div class="t">
    <div class="t1"></div>
  </div>
</div>

/* css 部分 */
@keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.t {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius: 50%;
  transform: scale(.8);
  border: 1px solid #dedede;
  &::before {
    content: "";
    width: 50px;
    height: 50px;
    background: radial-gradient(72px, #f00, #ff0, #080);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    box-shadow: 0 0 37px #fcff4a;
  }
  .t1 {
    height: 20px;
    border-radius: 50%;
    width: 20px;
    margin-top: -10px;
    top: 50%;
    left: -10px;
    background: radial-gradient(26px, #0082ff, #184608, #003ade);
    position: absolute;
    animation: t 3s infinite linear;
    transform-origin: 260px center;
  }
}

</style>

There is also a demo , here https://k-ui.cnRecommended learning

CSS3 video tutorial

The above is the detailed content of Teach you step by step how to use CSS3 to achieve animation effects (code sharing). For more information, please follow other related articles on the PHP Chinese website!