css动画

作者: 小猪x | 来源:发表于2022-10-11 15:55 被阅读0次

参考：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
    });
}

<button class="btn_nor {{isClick ? 'btn_select' : ''}}" bindtap="clickTest">
    点击动画
</button>

.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

步骤

通过@keyframes定义动画
将动画通过百分比，分割成多个节点；各节点分别定义各属性
在指定元素里，通过 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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*鱼摆动*/
        .shark {
            width: 509px;
            height: 270px; /* 盒子的宽高是一帧的宽高 */
            border: 1px solid #000;
            margin: 100px auto;
            background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
            animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧 */
        }

        /* 鱼所在的父盒子 */
        .sharkBox {
            width: 509px;
            height: 270px;
            animation: sharkBoxRun 20s linear infinite;
        }

        @keyframes sharkRun {
            0% {
            }

            /* 一张图片270宽度  8张 - 270 * 8 = 2160 */
            100% {
                background-position: left -2160px; /* 动画结束时，让图片位于最底部 */
            }
        }

        /* 鱼所在的父盒子 从左->右移动 */
        @keyframes sharkBoxRun {
            0% {
                transform: translateX(-600px);
            }

            100% {
                transform: translateX(3000px);
            }
        }

    </style>
</head>
<body>
<div class="sharkBox">
    <div class="shark"></div>
</div>

</div>
</body>
</html>

六、其他DEMO

1、闪动按钮

提醒按钮.gif

<view class="btn_fav_remind">
    <view class="remind_btn_flash"/>
    <view class="remind_tv">提醒我</view>
</view>

.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);
    }
}

单个旋转

<view class="outer">
    <view class="inner"/>
    <view class="horizontal-line"/>
    <view class="vertical-line"/>
</view>

多个旋转

<view class="outer">
    <view class="inner"/>
    <view class="inner"/>
    <view class="inner"/>
    <view class="inner"/>
    <view class="horizontal-line"/>
    <view class="vertical-line"/>
</view>

css动画

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

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

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

一、过渡：transition

二、2D、3D - transform

(1) 2D转换

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

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

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

(2) 3D 转换

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

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

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

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

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

四、动画animation

五、steps()的效果

1、时钟转动

2、摆动的鱼

六、其他DEMO

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

css动画

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

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

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

一、过渡：transition

二、2D、3D - transform

(1) 2D转换

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

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

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

(2) 3D 转换

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

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

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

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

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

四、动画animation

五、steps()的效果

1、时钟转动

2、摆动的鱼

六、其他DEMO

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

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