问答详情
源自:9-2 CSS3中调用动画

加了前缀了。谷歌上没有效果呢?

  display: inline-block;

  width: 20px;

  height: 20px;

  background: orange;

  border-radius: 100%;

  -webkit-animation-name:around;

  animation-name:around;

  animation-duration: 10s;

  animation-timing-function: ease;

  animation-delay: 1s;

  animation-iteration-count:infinite;


提问者:Minya 2015-02-06 11:49

个回答

  • qq_謡薳嘚灬聲夥_0
    2015-02-22 13:22:30

    我是360的  


    @-webkit-keyframes around{

      0% {

        -webkit-transform: translateX(0);

      }

      25%{

        -webkit-transform: translateX(180px);

      }

      50%{

         -webkit-transform: translate(180px, 180px); 

      }

      75%{

        -webkit-transform:translate(0,180px);

      }

      100%{

        -webkit-transform: translateY(0);

      }

    }

    div {

      width: 200px;

      height: 200px;

      border: 1px solid red;

      margin: 20px auto;

    }

    div span {

      display: inline-block;

      width: 20px;

      height: 20px;

      background: orange;

      border-radius: 100%;

      -webkit-animation:around;

      -webkit-animation-duration: 10s;

      -webkit-animation-timing-function: ease;

      -webkit-animation-delay: 1s;

      -webkit-animation-iteration-count:infinite;

    }


  • skyd
    2015-02-20 16:37:12

    是这样的哦

    @keyframes around{
      0% {
        transform: translateX(0);
      }
      25%{
        transform: translateX(180px);
      }
      50%{
         transform: translate(180px, 180px); 
      }
      75%{
        transform:translate(0,180px);
      }
      100%{
        transform: translateY(0);
      }
    }
    @-webkit-keyframes around{
      0% {
        transform: translateX(0);
      }
      25%{
        transform: translateX(180px);
      }
      50%{
         transform: translate(180px, 180px); 
      }
      75%{
        transform:translate(0,180px);
      }
      100%{
        transform: translateY(0);
      }
    }
    div {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      margin: 20px auto;
    }
    div span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: orange;
      border-radius: 100%;
      -webkit-animation:around;
      -webkit-animation-duration: 10s;
      -webkit-animation-timing-function: ease;
      -webkit-animation-delay: 1s;
      -webkit-animation-iteration-count:infinite;
      animation:around;
      animation-duration: 10s;
      animation-timing-function: ease;
      animation-delay: 1s;
      animation-iteration-count:infinite;
    }