前端-html、css(四)-transform、animation

本篇文章接着之前的文章前端-html、css(三)-定位、flex继续记录。

在h5中主要是同css3来进行动画的。css3中实现动画有两种方式，一种是过渡translation，另一种就是动画animation

translation

首先讲下变换transform。跟其他ui系统基本一直，变换分为这几种，translate，scale，rotate，skew

• translate 沿着x或者y轴评议
• scale 放大或缩小
• rotate 旋转
• skew 倾斜

translation的使用 如下，这样宽度的变化就有动画了

div {
    width: 200px;
    height: 100px;
    transition: all 0.6s;
    /* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
}
div:hover {  
/* 鼠标经过盒子，我们的宽度变为400 */
	width: 400px;
}

animation

动画的使用需要先定义动画，然后就可以使用动画里

• 动画的定义

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

• 动画的使用

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;