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 倾斜

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。

posted @ 2019-08-03 16:22 dobeco 阅读(1121) 评论(0) 编辑收藏举报

刷新页面返回顶部

dobeco

animation动画

属性

公告