css动画

参考：CSS3属性详解：动画详解

动画大全：CSS3动画代码大集合

小程序动画合集:10种小程序动画效果实现方法

一、过渡：transition

• transition-property: all; 所有属性都发生过渡：all。 指定属性用逗号分割width,height;

• transition-duration: 1s; 过渡的持续时间。

• transition-timing-function: linear;运动曲线。
  运动曲线工具：https://cubic-bezier.com/#0,0,1,1

  • linear 线性匀速
  • ease 减速
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速
  • cubic-bezier(number, number, number, number) 贝塞尔曲线

• transition-delay: 1s;过渡延迟。多长时间后再执行这个过渡动画。

四个属性可以综合成
transition: 过度属性 动画时间 运动曲线 延迟时间;

例如
transition: all 3s linear 0s;
transition: width .3s;
transition: background-color .3s;

clickTest() {
    this.setData({
        isClick: !this.data.isClick
    });
}

    点击动画

.btn_nor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300rpx;
    height: 80rpx;
    background-color: #0D91EC;
    color: white;
    font-size: 30rpx;
    opacity: 0.5;
    transition: all 0.5s ease-in;
}
.btn_select {
    height: 160rpx;
    width: 500rpx; 
    opacity: 1; /*透明度渐变*/
    background-color: #00ec65; 
    box-shadow: 0 0 15px #ec0015;
}

二、2D、3D - transform

(1) 2D转换

1、缩放 transform: scale(x, y);

• x：水平方向缩放倍数。
• y：垂直方向缩放倍数。
• 只写一个值就是等比例缩放。 transform: scale(2);

2、位移 transform: translate(水平位移, 垂直位移);

• 参数为百分比，相对于自身移动。 transform: translate(-50%, -50%);
• 正值：向右和向下。 负值：向左和向上。transform: translate(50px, -50px);
• 只写一个值，则表示水平移动 transform: translate(50px);

3、旋转 transform: rotate(角度);

• 正值：顺时针 transform: rotate(45deg);

• 负值：逆时针 transform: rotate(-45deg);

• turn：1turn = 360deg

• rotate 旋转时，默认是以盒子的正中心为坐标原点的。，可以用transform-origin改变旋转的坐标原点 transform-origin: 水平坐标 垂直坐标;

  • 属性值可以是百分比%、em、px等具体的值，也可以是top、right、bottom、left、center关键词。
  • transform-origin: 50px 50px; 指定xy坐标旋转
  • transform-origin: center top; 顶部中心为坐标原点 等价50% 0
  • transform-origin: 50% 0; 顶部中心为坐标原点 等价center top
  • transform-origin:0 0; 左上角
  • 参考CSS3之transform-origin详解

.btn_nor {
    transition: all 0.5s ease-in; /**需要加上transition设置过渡时间**/
}
.btn_select {
    transform: scale(1.5, 1.5) translate(50px, 50px) rotate(360deg) ; /**缩放、位移、旋转**/
}

(2) 3D 转换

3D坐标系：（左手坐标系）

c55bdeeed7291661d51aaf5e7a06c492.png

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分别代表X、Y、Z轴的正方向，就建立了一个左手坐标系。

浏览器的这个平面，是X轴、Y轴；垂直于浏览器的平面，是Z轴。

旋转的方向：（左手法则）

左手握住旋转轴，竖起拇指指向旋转轴的正方向，正向就是其余手指卷曲的方向。

所有的3d旋转，对着正方向去看，都是顺时针旋转。

1、缩放：scaleX、scaleY、scaleZ 、scale3d

• transform: scaleX(1.2); //X放大1.2倍
• transform: scaleY(1.5); //Y放大1.2倍
• transform: scaleZ(2); //Z放大1.2倍
• transform: scale3d(1.2, 1.5, 2); // X、Y、Y等价上面

注意translateZ增加透视效果perspective才能看到

body {
  /* 给box的父元素加透视效果*/
  perspective: 1000px;
}

2、位移：translateX、translateY、translateZ 、translate3d

• transform: translateX(100px); //沿着 X 轴移动
• transform: translateY(200px); //沿着 Y 轴移动
• transform: translateZ(300px); //沿着 Z 轴移动
• transform: translate3d(100px, 200px, 300px); // X、Y、Z都移动

3、旋转：rotateX、rotateY、rotateZ、rotate3d

• transform: rotateX(360deg); //绕 X 轴旋转360度
• transform: rotateY(360deg); //绕 Y 轴旋转360度
• transform: rotateZ(360deg); //绕 Z 轴旋转360度
• transform: rotate3d(1, 1, 0, 60deg); //绕 XY 轴旋转60度

四、动画animation

步骤

1. 通过@keyframes定义动画
2. 将动画通过百分比，分割成多个节点；各节点分别定义各属性
3. 在指定元素里，通过 animation 属性调用动画

定义动画：
  @keyframes 动画名{
      from{ 初始状态 }
      to{ 结束状态 }
  }

调用：
  animation: 动画名称 持续时间；

• animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态。
• animation: name 1s alternate linear 3 forwards;
• animation: name 4s;

.box {
    width: 100px;
    height: 100px;
    margin: 100px;
    background-color: red;
    
    /* 调用动画 具体参数参考下面*/
    /*animation: move 1s  alternate linear 3;*/
    animation: move2 3s linear forwards ;
}

/* 方式一：定义一组动画*/
@keyframes move1 {
    from {
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    to {
        transform: translateY(100px) rotate(555deg);
        opacity: 0;
    }
}

/* 方式二：定义多组动画*/
@keyframes move2 {
    0% {
        transform: translateX(0px) translateY(0px);
        background-color: red;
        border-radius: 0;
    }
    
    25% {
        transform: translateX(100px) translateY(0px);
    }
    
    /*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/
    50% {
        /* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。
        因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */
        transform: translateX(100px) translateY(100px);
        background-color: green;
        border-radius: 50%;
    }
    
    75% {
        transform: translateX(0px) translateY(200px);
    }
    
    /*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/
    100% {
        /*坐标归零，表示回到原点。*/
        transform: translateX(0px) translateY(0px);
        background-color: red;
        border-radius: 0;
    }
}

• 动画名称：
  animation-name: @keyframes 动画名称;
• 持续时间：
  animation-duration: 4s;
• 执行次数：
  animation-iteration-count: infinite; // infinite：无限次 n：指定次数
• 是否应该轮流反向播放动画：
  animation-direction: alternate; // normal： 正常 alternate： 反向
• 延迟执行：
  animation-delay: 1s;
• 结束时盒子的状态：
  animation-fill-mode: forwards; // forwards：保持结束状态， backwards：结束回到最初状态
• 运动曲线：默认是“ease”
  animation-timing-function: ease; //inear、 ease-in-out、 cubic-bezier(n,n,n,n)、 steps()等，默认"ease"

五、steps()的效果

1、时钟转动

66d6ef0df6b11d529b92538543d42348.gif

div {
    width: 3px;
    height: 200px;
    background-color: #000;
    margin: 100px auto;
    transform-origin: center bottom;    /* 旋转的中心点是底部 */
    animation: myClock 60s steps(60) infinite;
}

@keyframes myClock {
    0% {
        transform: rotate(0deg);
    }
    
    100% {
        transform: rotate(360deg);
    }
}

2、摆动的鱼

20180209_1245.gif

六、其他DEMO

1、闪动按钮

提醒按钮.gif

    
    提醒我

.btn_fav_remind {
    height: 42rpx;
    width: 128rpx;
    line-height: 42rpx;
    text-align: center;
    font-size: 24rpx;
    color: black;
    background-color: #FCD953;
    border-radius: 48rpx;
    overflow: hidden;
    animation: scaleBtn 1s ease-in-out infinite;
}

.remind_tv {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.remind_btn_flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.8));
    animation: scaleBtnFlash 1s ease-in-out infinite;
}
@keyframes scaleBtn {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes scaleBtnFlash {
    0% {
        transform: skewX(-30deg) translateX(-120%);
    }
    50% {
        transform: skewX(-30deg) translateX(-120%);
    }
    100% {
        transform: skewX(-30deg) translateX(250%);
    }
}

2、环绕旋转

20190407230827814.gif

20190408224632634.gif

.outer {
    /**定义子元素水平居中**/
    display:flex;
    justify-content:center;
    width: 100px;
    height: 100px;
    background-color: #6a5acd8c;
    position:relative;
}
/**竖向辅助线**/
.vertical-line{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    height:100%;
    width:1px;
    background:#000;
}
/**横向辅助线**/
.horizontal-line{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    height:1px;
    background:#000;
}
.inner {
    position: absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    background-color: #6a5acdeb;
    transform-origin:50% 50px;/**50px为环绕半径*/
    animation:an-circle 3s ease-in-out infinite;
}

.inner:nth-child(2){
    height:18px;
    width:18px;
    background-color: rgba(205, 53, 12, 0.92);
    animation-delay:.2s;
}
.inner:nth-child(3){
    height:16px;
    width:16px;
    background-color: rgba(32, 205, 37, 0.92);
    
    animation-delay:.4s;
}
.inner:nth-child(4){
    height:14px;
    width:14px;
    background-color: rgba(205, 190, 11, 0.92);
    animation-delay:.6s;
}

@keyframes an-circle  {
    to {
        transform: rotate(1turn);
    }
}

单个旋转

多个旋转