@keyframes
语法:@keyframes animationname {keyframes-selector {css-styles;}}
说明:我们可以通过keyframes来创建动画,keyframes-selector默认是从0%到100%(from到to)
animation
语法:animation: animation-name | animaton-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direaction | animation-paly-state
说明:
- animation-name: 动画名称, defaultVal:none, 特定的name必须和keyframes配合使用
- animation-duration: 动画持续时间, defaultVal: 0s
- animation-timing-function: 动画过渡类型
- 过渡类型: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
- animation-delay: 动画延迟时间, defaultVal: 0s
- animation-iteration-count: 动画循环次数, defaultVal: 1
- 循环类型: infinite | 具体循环次数
- animation-direction: 动画在循环中是否反向运动, defaultVal: normal | alternate
- animation-play-state: 动画状态
transform
语法:
none: 无转换
translate: 平移 exp: translate(120px, 0)
translateX: 水平方向平移
translateY: 垂直方向平移
rotate: 旋转 deg exp: rotate(10deg)
scale: 缩放 number exp: scale(1.5)
scaleX: 水平方向缩放
scaleY: 垂直方向缩放
skew: 斜切扭曲 deg exp: skew(10deg)
skewX: 水平方向扭曲
skewY: 垂直方向扭曲
说明:对实例做一些变化操作
transfrom-origin
: 变化应用的原点(中心点)
- 同时用百分比来指定原点的横纵坐标: ±N% ±N%
- 指定原点的横坐标可以为以下几项:left | center | right
- 指定原点的纵坐标可以为以下几项:top | center | bottom
transition
语法:transition: transition-property | transition-duration | transition-timing-function | transition-delay
说明:动画过渡
transition-property
: 过渡应用的css属性, defaultVal: all(应用到所有css样式上) | none | 指定的css属性
示例:
实现一个div
,顺时针转动
{
@keyframes mydemo {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
animation: mydemo 10s linear infinite;
}