【前端样式】css/js常用动画（一）移动动画效果（伪类+transition+ transform+ animation）

---

一、常用概念区分

transform（变形）——组合属性，可以只设置其中一个/多个属性值，空格隔开。属性定义元素的形状/位置变化，：可以定义五个子属性：

• 移动translate
• 缩放scale
• 旋转rotate
• 扭曲skew
• 矩阵变形matrix元素

translate（移动）——transform的一个属性值，定义元素的移动效果

• translate(x,y)两坐标同时移动，可以使用百分比
• translateX(x)单方向移动
• translate3d(x,y,z)定义 3D 移动

transition（过渡）——定义某种属性的过渡效果，是一个简写属性，可以定义四个子属性：

• transition-property 规定设置过渡效果的 CSS 属性的名称。
• transition-duration 规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function 规定速度效果的速度曲线。
• transition-delay 定义过渡效果何时开始。

animation（动画) animation 定义某种keyframe的动画效果，属性是一个简写属性，用于设置六个动画子属性：

• animation-name 规定需要绑定到选择器的 keyframe 名称
• animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function 规定动画的速度曲线。
• animation-delay 规定在动画开始之前的延迟。
• animation-iteration-count 规定动画应该播放的次数。
• animation-direction 规定是否应该轮流反向播放动画。

伪类(Pseudo-classes) 为不同状态的元素为其添加对应的样式，使用单冒号(:)表示伪类

• :hover 把鼠标放在链接上的状态
• :active 已选中的链接

伪元素用于创建一些不在文档树中的元素，并为其添加样式。使用双冒号(::)/(:)表示伪元素

• ::before 在元素内容之前插入额外生成的内容
• ::after 在元素内容之后插入额外生成的内容
• :first-line 向文本的首行设置特殊样式，“first-line” 伪元素只能用于块级元素。
• :first-letter 向文本的首字母设置特殊样式
• ::selection 对用鼠标键盘等已选取的文字部分应用样

---

二、移动动画实现

1.transition+:hover伪类实现图片悬浮移动动画

• js或jquery 元素移动以像素计算，手机上移动效果会有卡顿
• 利用CSS3 transition 可以很简单的实现流畅的移动动画
• 原始元素.floatBox设置样式移回原位置的效果，同样为效果设置过渡时间
• .floatBox:hover设置左移效果，悬浮时触发

css代码：

/* 元素样式 */
.floatBox {
    width: 300px;
    background-color: rgb(221, 143, 143);
    /* x=0代表移回原位置 */
    transform: translateX(0);
    /* 移回也需要0.4s时间过渡 */
    transition: transform 0.4s;
}

/* hover样式 */
.floatBox:hover {
    /* x=-10px代表左移10px */
    transform: translateX(-10px);
    /* 0.4s完成transform移动效果*/
    transition: transform 0.4s;

}

效果展示：

height="500" width="900" scrolling="no" title="transition+hover实现移动动画" src="//codepen.io/juwuyu/embed/MRezYe/?height=510&theme-id=36604&default-tab=css,result" allowfullscreen="true"> See the Pen transition+hover实现移动动画 by juwuyu ( @juwuyu) on CodePen.

2.鼠标移入画面向上移动

思路：

• 容器宽度固定，高度根据子元素变化
• img设置高度138px，title设置高度28px
• title设置margin-top: -28px;实现位移，和img重叠
• 容器伪类:hover title设置高度，line-height，margin-top三项填满，实现全重叠+文字居中效果
• img和title设置 transition: 0.4s;

css代码：

/* 2.鼠标移入画面向上移动 */
.img-wrapper {
    width: 300px;
}

.img-wrapper .img {
    height: 138px;
    background-color: rgb(221, 143, 143);
}

.img-wrapper .title {
    /* margin-top设置为负值，实现重叠效果 */
    margin-top: -28px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    background-color: rgba(222, 134, 57, 0.8);
    /* 所有属性过渡时间 */
    transition: 0.4s;
}

.img-wrapper:hover .title {
    /* margin-top为-容器总高度，填满容器 */
    margin-top: -138px;
    text-align: center;
    /* height+linehright实现文字居中 */
    height: 138px;
    line-height: 138px;
    background-color: rgba(222, 134, 57, 0.8);
    /* 所有属性过渡时间 */
    transition: 0.4s;
}

效果展示：

height="500" width="900" scrolling="no" title="XQKyyE" src="//codepen.io/juwuyu/embed/XQKyyE/?height=434&theme-id=36604&default-tab=css,result" allowfullscreen="true"> See the Pen XQKyyE by juwuyu ( @juwuyu) on CodePen.

参考：https://blog.csdn.net/u012767607/article/details/80481933

三、元素变形

1.requestAnimationFrame生成进度条

思路：

• requestAnimationFrame在浏览器下次刷新之前前调用指定的回调函数更新动画，递归调用可以实现流畅的动画
• timer储存计时器标志，用于清除计时器
• 再回调函数里先判断宽度是否大于500px
• 小于，动画没结束，修改样式，递归调用 requestAnimationFrame
• 大于，动画结束，清除计时器cancelAnimationFrame(timer)

js代码：

var timer;//计时器id
var btn = document.getElementById('btn')
  btn.onclick = function() {
    myDiv.style.width = "0";
    cancelAnimationFrame(timer);//清除计时器
    timer = requestAnimationFrame(function fn() {
      if (parseInt(myDiv.style.width) < 500) {//宽度小于500，修改样式
        myDiv.style.width = parseInt(myDiv.style.width) + 5 + "px";
        myDiv.innerHTML = parseInt(myDiv.style.width) / 5 + "%";
        timer = requestAnimationFrame(fn);//递归调用计时器
      } else {
        cancelAnimationFrame(timer);//宽度大于500，清除计时器
      }
    });
  };

效果展示：

height="500" width="900" scrolling="no" title="animation-frame生成进度条" src="//codepen.io/juwuyu/embed/pBLdao/?height=300&theme-id=36604&default-tab=js,result" allowfullscreen="true"> See the Pen animation-frame生成进度条 by juwuyu ( @juwuyu) on CodePen.