css动画及权重

标签：cti   form   bsp   -o   帧动画   设置   标签   alt   合并   

transition 动画效果
属性
transition-xxx
-duration ： 过渡时间
-property ： 过渡属性 width height backgroud-color
none | all | property
-timing-faction : 过渡方式
lnear 匀速 默认
ease 缓冲运动
ease-in 加速 ease-out 减速
ease-in-out 快慢快

-delay 延时时间

合并起来
transition ： property duration timing-function delay
属性 过渡时间 运动方式 延时时间

transform 变换

属性
translate（x ，y） 位移多少像素
scale（x，y） 缩放比例 倍数 1 为不变
rotate（deg） 设置盒子旋转参数为度数 45deg 45度
skew（x-ange，y-ange ） 设置盒子倾斜单位为 deg 45deg ...

rotateX rotateY rotateZ 设置三位旋转
perspective ： 设置透视距离 图片旋转的时候透视距离
默认为none 没有透视
语法 transform ： perspective（200px） rotateY（旋转角度）
做变形动画的时候
需要设置初始值 不设置容易出现跳边的bug
transform-style ：perspective-3d 设置盒子为3d旋转


backface-visibility ： 设置盒子背面是否可见
默认为可见
hidden 不可见
.box .back ：文字


transform-origin 盒子旋转的中心点 默认为center
50px 50px 以盒子上面为原点 50px 50px 作为中心点

animation 动画
可以自行播放的动画 关键帧动画

设置关键帧
@keyframes 动画名称{
0%{设置}
100%{设置}
}
属性
animation-name ：动画名称
animation-duration ： 动画时间
animation-delay ： 动画延迟时间
animation-timing-function ： 动画播放形式
animation-iteration-count ： 动画播放次数
n ：几次
infinite ： 无穷次

animation-direction ： 动画是否反向还原
alternate ： 反向还原

animation-play-state ： 动画状态
pause ： 停止
running : 运动

合成写法
animation ： 名称 动画时间 运动方式 延迟时间 次数

动画实例

1. 风车动画

animation ： 名称 动画时间 运动方式 次数（infinite）
动画设置 transform ： rotate（360deg）

2. lodding 等待动画
animation ： 名称 动画时间 运动方式 次数（infinite）
动画设置 transform ： translateY（y轴上移多少像素）
对每个动画元素设置等待时间

3. 行走动画
animation
step（8） 跳着走 不是连续性的

权重

权重值等级
1. ！important 加在样式属性后 权重值是10 000
color：red ！important
2. 内联样式 style="" ,权重值为1 000
3. id 选择器 如 # content 权重值为100
4. 类 伪类和属性选择器 权重值为10
5. 标签选择器伪元素选择器 权重值为1
6. 通用选择器（*） 子选择去（>） 相邻选择器 （+） 同胞选择器 （~） 权重值为0

css动画及权重

标签：cti   form   bsp   -o   帧动画   设置   标签   alt   合并   

原文地址：https://www.cnblogs.com/fuyi2345/p/11391769.html