transition过渡
简单动画通常称之为“过渡transition”。transition是CSS属性,通常表示为在一定时间内,从一个值变化为另一个值。
transition-property:需要过渡的属性
transition-duration:需要过渡的时间
transition-timing-function:过渡的效果(快、慢)
transition:是transition-property、transition-duration和transition-timing-function属性的缩写
注:并非所有的属性都支持过度,颜色、尺寸、透明度的属性通常都支持过渡效果。
transform变形
属性值:
1、scale 缩放比例
取值:1不变,小于1缩小,大于1放大
2、skew 倾斜
取值:角度+deg 角度可以是正,也可以是负
3、rotate 旋转
rotate+X/Y/Z 以X/Y/Z轴旋转,正值顺时针旋转,负值逆时针旋转
transform-origin 设置旋转的中心点
transform-origin x轴偏移量 y轴偏移量
创建动画和使用动画
创建动画
书写格式:@keyframes 自定义动画名称 {
0% {css代码块}
50% { css代码块}
100% {css代码块}
}
注:如果起始位置和结束位置相同,则可以省略结束位置的设置。
使用动画
书写格式:animation:动画名称 动画时长 动画次数
注:播放次数(数值、infinite无限循环)