Captain9911

CSS动画

  • Oct 26, 2022

关键词：css, transition, transform, animation

过渡效果

  • transition: 要过渡的属性 花费时间 运动曲线 何时开始(延迟的时间);
  • 运动曲线 默认ease
  • 何时开始 默认0s
  • 如果有多组属性变化，还是用逗号隔开。


/* transition: 要过渡的属性 花费时间 运动曲线 何时开始(延迟的时间); */
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;

/* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
/* 这个s单位必须写 */
transition: all 0.3s;

/* 有多组属性变化时，用逗号隔开 */
transition: width 0.6s ease-in 0.3s, height 0.6s ease-out 0.2s;

变换

变换效果都可以与过渡效果transition同时使用。

transition: all 0.6s;

2D缩放

/* 水平、垂直都缩放 */ transform: scale(0.3, 0.6)

/* 只写一个数值时，相当于X、Y都缩放相同的比例 */
/* transform: scale(0.5) */

2D旋转

/*
单位：度 deg
正数：顺时针
负数：逆时针
*/
transform: rotate(700deg);

变形中心点

/* 设置的变形中心 */
transform-origin: 200px 100px;

/* 也可以设置方向 */
transform-origin: left;

2D倾斜

/* 向下倾斜30度 */
transform: skew(0, 30deg);

/* 向上倾斜30度 */
transform: skew(0, -30deg);

/* 向左倾斜30度 */
transform: skew(30deg, 0);

/* 向右倾斜30度 */
transform: skew(-30deg, 0);

3D旋转

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

/*
单位：度 deg
正数：顺时针
负数：逆时针
*/

/* 绕X轴旋转 */
transform: rotateX(700deg);

/* 绕Y轴旋转 */
transform: rotateY(700deg);

/* 绕Z轴旋转 */
transform: rotateZ(700deg);

视距

眼睛到屏幕的距离。视距越大效果越不明显，视距越小，越明显。

/* 视距要加在父视图上 */
.class1 {
    perspective: 1000px;
}

.classbase:hover {
    /* 绕Y轴旋转 */
    transform: rotateY(700deg);
}

3Dz轴移动

需要先给父视图设置一个视距，才能看到效果。

/* Z轴移动 */
transform: translateZ(300px);

3D移动

/*
transform: translate3d(x, y, z);
x 和 y 可以是 px 可以是 % 但是z 只能是px
*/

/* 相当于是同时移动了xyz轴 */
transform: translate3d(300px, 100px, 500px);

动画

单个动画

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

div {
    width: 300px;
    height: 150px;
    background-color: pink;
    border: 2px solid blue;

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

    /* infinite 无限循环  */
    /* alternate 从起点开始动画 */
    /* alternate-reverse 从终点开始动画 */

    /*
    一般的用法：
    不重复的动画 animation: aniname 2s;
    无限循环动画 animation: aniname 2s infinite;
    */
    animation: helloname 2s ease-in 0s infinite alternate;
}

/* 自定义名称为 helloname 的动画 */
@keyframes helloname {
    /* 起始位置 */
    frome {
        transform: translateX(0);
    }
    /* 结束位置 */
    to {
        transform: translateX(500px);
    }
}

多组动画

div {
    width: 100px;
    height: 60px;
    background-color: pink;
    border: 2px solid blue;
    animation: aniname 2s infinite;
}

@keyframes aniname {
    0% {
        transform: translate3d(0, 0, 0);
    }
    25% {
        transform: translate3d(400px, 0, 0);
    }
    50% {
        transform: translate3d(400px, 400px, 0);
    }
    75% {
        transform: translate3d(0, 400px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* 父视图设置个视距，Z轴再变化下，就是3D动画了。 */
Search