Animation的学习
1. Animation基本用法
<!--由@keyframes来定义新的animation动作-->
@keyframes animation1{
0%{
transform:translate(100px,200px);
}
100%{
transform:translate(0px,0px);
}
}
@keyframes animation2{
0%{
transform:translate(100px,200px);
}
100%{
transform:translate(0px,0px);
}
}
<!--
在需要引入的组件中设置animation属性，
若存在多个animation属性重叠，后面的权重更大
-->
div{
animation-name:animation1,animation2;
animation-duration:4s,2s;
}
2. Animation属性
animation-name //名称
animation-duration //动画持续时间
animation-delay //延时开始动画
animation-fill-mode //动画结束后的行为，forwards（保持最后一个属性），backwards（应用第一个属性），both（前后两个都应用），none
animation-iteration-count //infinite（无限），n（次数）
animation-timing-function //linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps(n,start/end)
animation-direction //normal，reverse，alternate（慢慢回到起始点），alternate-reverse
animation-play-state //paused，running
3. cubic-bezier()
cubic-bezier是一种控制动画运动速率的曲线，
推荐官网：www.cubic-bezier.com
<!--属性值-->
cubic-bezier(x1,y1,x2,y2) //分别对应下图的p1和p2点
图源菜鸟教程
cubic-bezier-02.jpg
响应式布局
flex
grid
