Home >Web Front-end >HTML Tutorial >css3动画,设置动画基点_html/css_WEB-ITnose

css3动画,设置动画基点_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:37:421786browse


@-webkit-keyframes swing {
    50% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
  }
    100% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}


@keyframes swing {
    50% {
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
  }
   100% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}

调用动画

.swing {
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-animation-name: swing;
  animation-name: swing;

}

transform-origin用来设置旋转元素的基点,top left right bottom %,

详情查看h ttp://www.w3school.com.cn/cssref/pr_transform-origin.asp

效果如下图,瓶子左右摆动,以中心为基点左右摆动。



版权声明:本文为博主原创文章,未经博主允许不得转载。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn