CSS animations 使从一个 css 样式转换为另一个样式. 一般动画都是由 @keyframes 实现
animation 子属性
animation-delay 设置延时
animation-direction 设置动画运行后, 反向还是重新运行 alternate 来回动画
animaton-duration 一个周期的时长
animation-iteration-count 设定动画重复次数 infinite 重复
animation-name 指定 @keyframes 描述关键帧的名称
@keyframes 规则
- @keyframes slidein {
- from{
- margin-left: 100%;
- width: 100%;
- }
- to{
- margin-left: 0;
- width: 100%;
- }
- }
常用类型是:
- @keyframes identifier {
- 0%{
- top:0;
- left: 0;
- }
- 30%{
- top:50px;
- }
- 68%, 72%{
- left: 50px;
- }
- 100%{
- top:100px;
- left:100%;
- }
- }
animation 属性简写 依次排列
- animation-name
- animation-duration
- animation- timing-function
- animation-delay
- animation- iteration-count
- animation-diraction
一般前三个就可以了!
animation- timing-function 属性
linear 速度从头到尾一样
ease 默认 低速开始 在加速 在降速
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n) 自己设定
animation-iteration-count 播放次数
n 直接定义数字
infinite 无限播放
实例
- p{
- position: relative;
- width: 100px;
- border: 1px solid #000;
- animation: fly 2s ease 1s infinite alternate;
- }
- @keyframes fly {
- 0%{
- width: 100px;
- left: 100%;
- }
- 50%{
- width: 150px;
- left: 50%;
- }
- 100%{
- width: 100px;
- left: 0;
- }
- }
来源: https://www.2cto.com/kf/201807/763771.html