前端学习之CSS---动画、关键帧动画

动画、关键帧动画

一、动画：transition

1、动画过渡属性

CSS3的transition允许css的属性值在一定的时间区间内平滑的过渡

这种效果可以在鼠标单击、获得焦点、被点击、或对元素任何改变中触发，并圆滑的以动画效果改变css的属性值

transition: all 5s linear 3s
all === 单一属性：transition-property: 检索或设置对象中的，参与过渡的属性
	可以替换成任意想要监控的属性（color，height等）
5s  === 单一属性：transition-duration: 检索或设置对象，动画的持续时间
	支持s或ms单位
linear	单一属性：transition-timing-function: 检索或设置对象中，过渡动画的类型
	linear:匀速
3s  === 单一属性：transition-delay: 检索或设置对象，延迟时间
	支持s或ms单位

transition属性要写在盒子最开始的css属性里，监控盒子本身的属性值，不要写在hover之类的事件中


display: none/block 不支持动画过渡，因为display:none时就已经脱出文档流
需要支持显示与隐藏时使用visibility:hidden
或者使用height:0,overflow:hidden

 

2、动画过渡类型

贝塞尔曲线：http://cubic-bezier.com/

动画过渡类型
linear		匀速
ease		逐渐慢下来
ease-in		加速，先慢后快
ease-out	减速
ease-in-out	先慢再快再慢
cubic-bezier(.36,1.57,.88,-0.55)	可通过上方链接的网站自动生成参数

 

---

二、关键帧动画：animation

animation与transition：

相同点：都是随着时间改变元素的属性值

不同点：transition需要触发一个事件（hover或click），animation不需要触发也可以显示的改变css值达到动画效果

1、属性

animation: mymove 20s ease-in-out 2s infinite alternate
animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 是否反向运动

animation-name:	动画名称，只能使用你声明过的动画
animation-duration: 动画持续时间
animation-timing-function: 动画类型
animation-delay: 延迟时间
animation-iteration-count: 循环次数
animation-direction: 动画在循环中是否反向运动
	从大到小=>从小到大，可以设置normal正常或reverse反向，
	正常-反方向交替循环alternate，或反向-正常交替alternate-reverse
animation-play-state: 动画的状态
	可以在hover中设置paused，鼠标放上去会暂停动画，不设置时默认running
animation-fill-mode: none | forwards | backwards  动画填充模式，默认为none，不保留
	forwards，保留最后一帧状态；backwards，保留初始第一帧的状态

 

2、声明动画

使用动画之前需要声明动画
在css文件中声明
@keyframes mingzi{	//声明动画时名字任意
    from{	//初始状态
        width:200px;
        height:200px;
    }
    to{		//结束状态
        width:400px;
        height:400px;
    }
}
animation: mingzi 3s linear 3
3表示执行3次，可以写任意次数，如需无限次执行可以写infinite

除了开始和结束状态以外，还可以设置百分比的形式控制动画效果
@keyframes percentage{
    0%{
        初始状态样式;
    }
    25%{
        中间样式;
    }
    50%{
        中间样式;
    }
    70%{
        中间样式;
    }
    100%{
        结束状态样式;
    }
}

 

3、动画过渡类型：关键帧steps

除了和transition同样的过渡类型以外，animation支持直接进行关键帧跳跃

animation: mymove 5s steps(1,end)
steps中的1代表几步，数值越大，过渡越平缓
end代表保留当前帧，实际效果会看不到最后一帧，动画结束
除了end还有start，steps(1,start)
start保留下一帧，实际效果会看不到第一帧，从第一帧很快就会跳到第二帧，只有在动画结束后回到初始状态才能看到，如果无限循环的情况下会看不到第一帧

也可以写作step-start或step-end
解决方案可以把有画面的地方作为倒数第二帧，最后一帧留白，这样可以保证看到所有想展示的画面

 

很多动画效果可以直接引用animate动画库，Animate.css：https://animate.style/