初学Web笔记 css day09

https://developer.mozilla.org/zh-CN/docs/Web/CSS/css_animated_properties

转换
动画

一.转换(2D)
包含有位移、旋转、缩放、倾斜(斜切)
1.位移
transform: translate(水平方向, 垂直方向)
transform: translateX(水平方向)
transform: translateY(垂直方向)
转换的特点
不会脱离文档流，继续占位
属性值中使用的百分比相同对自身的值
只有行内块和块状元素可以使用，行内元素不能使用
2.旋转
transform: rotate(角度deg) 沿着中心点旋转
transform: rotateX(角度deg) 沿着x轴旋转
transform: rotateY(角度deg) 沿着y轴旋转
3.设置转换中心点
transform-origin: 水平方向 垂直方向;
4.缩放
transform: scale(倍数) 等比例缩放
transform：scaleX(倍数) 沿着x轴缩放
transform: scaleY(倍数) 沿着y轴缩放
5.倾斜(斜切) —— 了解
transform: skew(水平方向, 垂直方向)
如果只写一个值表示水平方向
transform: skewX(水平方向)
transform: skewY(垂直方向)

二.动画
1.定义动画
@keyframes 自定义动画名称{
from {
动画的开始属性
}
to {
动画结束的属性
}
}
多组动画
@keyframes 自定义动画名称 {
0%{ }
20% { }
…
100% { }
}
2.调用动画
animation: 动画名称 总时长 延时 运动曲线 运动次数 是否反向 播放状态
运动次数默认是1，无限循环infinite
是否交替，默认是不交替，交替是alternate
播放状态，默认是播放，running，暂停是paused
控制动画暂停
animation-play-state: running/paused;
练习：定义动画，动画的内容从0deg旋转到360deg；然后给图片调用动画。

三.兼容性
针对于低版本的浏览器，CSS中加入了浏览器专属前缀
谷歌/Safari -webkit-
火狐 -moz-
欧朋 -o-