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;

• 
  

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

  Copy after login

  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>

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!