animation动画

属性

• @keyframes 关键帧
• animation-name 动画名称
• animation-fill-mode 动画结束之后的状态
• animation-direction 动画在循环中是否反向运动
• animation-duraction 持续时间
• animation-timing-function 动画过渡类型
• animation-delay 延迟
• animation-iteration-count 循环次数
• animation-play-state 动画状态

@keyframes 动画名称 {
  /*帧  0%可以用from代表，100%可以用to代表*/
  from {}
  to{}
}

animation-name

animation-fill-mode:forwards 让动画保持在结束状态
                    none 默认值 回到动画没开始时的状态
                    backwrads 回到第一帧
                    both 根据animation-direction（见后）轮流应用forwards和backwards规则。

animation-direction: normal 默认
                     reverse 反向
                     altermate 动画先正常运行再反方向运行，并持续交替运行
                     alternate-reverse 动画先反运行再正方向运行，并持续交替运行
                     
animation-duration: 1s 默认0s 如果有多个属性，以逗号进行分割            
                     
animation-timing-fucntion: linear 匀速
                           ease 平滑过度
                           ease-in 由慢到快
                           ease-out 由快到慢
                           ease-in-out 由慢到快再到慢
                           cubic-bezier(.14,.75,.92,.45)
           
animation-delay: 1s
animation-iteration-count: 1 || infinite
animation-play-state: running 运动
                      paused 暂停

简写

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
    animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;
}

animation

• animation-name 动画名称
• animation-duration 动画持续时间 1s
• animation-direction 动画运动方向 normal reverse
• animation-timing-function 动画过度类型 ease ease-in ease-in-out linear
• animation-fill-mode 动画结束之后的状态 keywrads backwrads
• animaiton-iteration-count 1 infinte
• animation-play-state 动画的状态
• animation-delay 动画延迟时间

过度

• transtion-duration 过度持续时间
• transtion-delay 过度延迟时间
• transtion-timing-function 过度类型
• transtion-property 过度的属性

位移transform

• trnasform: translate(x,y) 位移，第一个参数为x轴，第二个为y轴
• transform: translateX() 沿x轴移动
• transform: trnaslateY() 沿y轴移动
• transform: rotate(deg) 旋转
• transform: scale(x,y) 缩放 第一个参数对应X轴，第二个参数对应Y轴
• transform: scaleX() 水平缩放
• transform: scaleY() 垂直缩放
• trnasform: skew 倾斜

3D

• transform: rotateX() x轴翻转
• transform: rotateY() y轴翻转
• transform-origin: 50% 50% 旋转基点位置 left right top center bottom

flex

容器属性

• flex-direction 伸缩方向
• flex-wrap 是否换行
• flex-flow 前面两个的简写
• justify-content 主轴对齐方式
• align-items 交叉轴对齐方式

• align-content 多跟轴线的对齐方式

• flex-direction: row | row-reverse column column-reverse
• flex-wrap : wrap | mowrap | wrap-reverse
• flex-flow: row wrap
• justify-content : flex-start | flex-end | space-around | space-bewteen | center
• align-items: center | flex-start | flex-end | stretch | baseline

• align-content flex-start | flex-end| space-between | space-around | stretch | center

项目属性

• order 项目排列顺序 默认为0
• flex-grow 放大比例 默认为0。即如果存在剩余空间，也不会放大
• flex-shrink 缩小比例 默认为1 空间不足，该项目会缩小
• flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex flex-grow flex-shrink flex-basis缩写
• align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。