css3动画,设置动画基点
2015-08-31 12:07
661 查看
@-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 %,
详情查看http://www.w3school.com.cn/cssref/pr_transform-origin.asp
效果如下图,瓶子左右摆动,以中心为基点左右摆动。
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 %,
详情查看http://www.w3school.com.cn/cssref/pr_transform-origin.asp
效果如下图,瓶子左右摆动,以中心为基点左右摆动。
相关文章推荐
- css父级div设置了透明度,子级也出现透明度的解决方法
- CSS盒子模型
- CSS百分比定义高度
- 边框的css3样式
- CSS基本样式讲解
- CSS之float详解
- CSS绘制三角形
- CSS基础2
- 手机web——自适应网页设计(html/css控制)
- CSS入门基础知识
- Web前端从入门到精通-10 css简介——盒模型2
- CSS居中集合&图片视口最大化
- CSS选择器的特殊性和LOVE HA
- css3
- css3动画事件—webkitAnimationEnd与计时器time事件
- css3弹性盒布局
- 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:
- CSS3鼠标悬停图片动画
- CSS基础1
- [转载]Qt之鼠标样式