css动画（transition 和 animation）

2023-12-29 19:53:22

CSS 动画的两种做法

第一种：transition 过渡
第二种：animation 动画（推荐）

transition（过渡）

作用

补充中间帧

语法

transition: 属性名 | 时长 | 过渡方式 | 延迟
注意⚠️：指定第一个数字默认指定为时长，第二个数字默认才是延迟时间
拓展：1s = 1000ms（毫秒）

  transition: left 200ms linear

可以用逗号分隔两个不同属性

  transition: left 200ms , top 400ms

可以用all代表所有的属性

  transition:all 200ms

过渡方式

常用的有：

linear 线性

动画会以恒定的速度从初始状态过渡到结束状态

ease 缓动

动画开始时逐步加速，中间逐渐减慢，结束时逐步加速

ease-in-out

动画开始时缓慢，中间逐步加速，结束时逐渐减慢

不是所有属性都能进行Transition（过渡）

display:none ==> block 没法过渡

显示和消失是无法过渡的～

一般改成visibility:hidden ==> visibile

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @keyframes zhuan {
            from {
                transform: rotate(0)
            }
            /*3% {*/
            /*    transform: rotate(180deg);*/
            /*}*/
            to {
                transform: rotate(360deg);
            }
        }
        #box{
             width: 600px;
             height: 600px;
             /*background: red;*/
             margin: 100px auto 0;
             animation: zhuan 10s linear 2s infinite;
             /*动画：转5秒匀速，2秒开始极大的；*/   /*linear:匀速*/
         }
        #box>img{width: 600px;height: 600px;animation: zhuan 10s linear 2s infinite;}
    </style>
</head>
<body>
<div id="box">
    <img src="a(1).png" alt="">
    <img src="4(1).png" alt="">
</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          窗口端口，可视窗口
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            width: 300px;
            height: 300px;
            background: red;
            margin: 100px auto 0;
            /*transform: translate(100px, 200px);!*移动*!*/
            /*transform: rotate(45deg);角度旋转*/
            /*transform: scale(.5);倍数*/
            transform: scale(0.5) rotate(45deg) translate(100px,200px);
            /*“：”前面是属性，后面是属性值；如果要实现所有效果，将代码放在同一排*/
            /*谷歌最小字体大小12px*/
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>

码农公寓

CSS 动画的两种做法

transition（过渡）

不是所有属性都能进行Transition（过渡）

相关文章