平移、旋转、缩放、倾斜效果
样式属性: Transform
/*平移*/
/* transform: translate(100px,100px); */
/* 缩放 */
/* transform: scale(1.2); */
/* 旋转 */
/* transform: rotate(180deg); */
/* 倾斜 */
/* transform: skew(20deg,30deg);
*/
/* 设置奇点 */
transform-origin: 20% 40%;
Hack: -浏览器内核名-样式属性（都要使用）
IE浏览器: -ms- Chrome/Safari: -webkit-
火狐浏览器: -moz- 欧朋浏览器: -o-
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
样式属性：Transition:
语法：transition: property duration timing-function delay;
使用过渡: transition-property 常用all
过渡时间: transition-duration属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。transition-duration:5s
过渡速度: 时间曲线transition-timing-function 属性规定过渡效果的速度曲线。常用: linear 匀速
设置延时:transition-delay 属性规定过渡效果何时开始。transition-delay 值以秒或毫秒计。
@keyframes : 设置关键帧
0% 开始点
100% 结束点
from 等同于0%
To 等于100%
/* 定义一个动画 */
@keyframes mymove1 {
0%{left:0px;width:100px; background-color: orange; height: 100px;}
50%{
left:300px; width:300px; background-color: red; height: 300px;
}
100%{
left:0px; width:100px; background-color: green; height: 100px;
}
}
.box{
border-radius: 50%;
/*使用动画*/
animation: mymove1 5s infinite;
position: relative;
}
播放次数：n / infinite无线循环
原文：https://www.cnblogs.com/64Byte/p/12546261.html