手把手教你怎么使用CSS3实现动画效果（代码分享）

之前的文章《H5篇：页面中实现动画的几种方式？（附代码）》中，带大家了解页面中实现动画的几种方式。下面本篇文章给大家介绍怎么使用CSS3来实现一个简单漂亮的动画效果，我们一起看看

复习下 css3 的动画， 都快不会写了，那会儿挺喜欢 flash 的，可惜了时代在前进。写这里就当是文档看吧

浏览器支持

internet Explorer 10、Firefox 以及 opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

animation属性是一个简写属性，用于设置六个动画属性：

• animation-name

• animation-duration

• animation-timing-functionanimation-delay

• animation-iteration-countanimation-direction

语法

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

关于keyframe的定义

• Firefox支持替代的@-moz-keyframes规则；
  

• OPEra支持替代的@-o-keyframes规则；
  

• Safari和Chrome支持替代的@-webkit-keyframes规则；
  

• 取值支持 0-100% 和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写了一个例子，地球绕太阳转

以下是代码

!-- 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>
    

还有一个 demo ，在这里https://k-ui.cn

推荐学习CSS3视频教程

以上就是手把手教你怎么使用CSS3实现动画效果（代码分享）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！