CSS3的2D动画属性

super码力

已于 2022-05-21 20:41:57 修改

阅读量728

点赞数 5

分类专栏： # HTML和CSS学习笔记文章标签： css3 动画 css

于 2021-10-25 18:28:48 首次发布

本文链接：https://blog.csdn.net/m0_61843874/article/details/120955812

版权

HTML和CSS学习笔记专栏收录该内容

18 篇文章 10 订阅

订阅专栏

文章目录

前言
一、2D转换
二、2D动画的基本使用方法
三、2D动画属性
四、2D动画的具体实现
- 1.奔跑熊
- 2.盒子进圈

前言

动画是css中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

提示：以下是本篇文章正文内容，下面案例可供参考

一、2D转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
1、语法：
transform：translate（x,y）;
或者分开写
transform：translateX（n);
transform：translateY（n);
2、重点：
定义2D转换中的移动，沿着X和Y轴移动元素；
translate最大的优点：不会影响其他元素的位置；
translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
对行内标签没有效果；

2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转。
1、语法：
transform：rotate（度数）
2、重点：
rotate里面跟度数，单位是deg比如rotate（45deg）;
角度为正时，顺时针，负时，为逆时针；
默认旋转的中心点是元素的中心点；
2D转换中心点transfo-origin
1、语法：
transform-origin：x y;
2、重点：
注意后面的参数x和y用空格隔开；
xy默认转换的中心点是元素的中心点（50% 50%）;
还可以给x y设置像素或者方位名词（top bottom left right center）;

2D转换之缩放scale：缩放，顾名思义，可以放大和缩小。只要给元素添加上这个属性就能控制它放大还是缩小。
1、语法：
transform：scale（x,y）;
2、重点：
注意其中的x和y用逗号分隔；
transform：scale（1，1）：宽和高都放大一倍，相对于没有放大；
transform：scale（2，2）：宽和高都放大了2倍；
transform：scale（2）：只写一个参数，第二个参数则和第一个参数一样，相当于scale（2，2）；
transform：scale（0.5，0.5）：缩小；
scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子；

二、2D动画的基本使用方法

分为两步：

先定义动画，
再使用（调用动画）

语法：
1、用keyframes定义动画
（类似定义类选择器）：
@keyframes 动画名称{
0%{
width：100px；
}
100%{
width：200px;
}
2、元素使用动画：
div{
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
//调用动画
animation-name:动画名称；
//持续时间
animation-duration:持续时间；
}

三、2D动画属性

1.常见属性

在这里插入图片描述

2.速度曲线属性

在这里插入图片描述

3.动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；
语法：
animation：myfirst 5s linear 2s infinite alternate;

注意：

简写属性里面不包含animation-play-state；
暂停动画：animation-play-state:puased;经常和鼠标经过等其他配合使用；
想要动画走回来，而不是直接跳回来：animation-direction:alternate;
盒子动画结束后，停在结束位置：animation-fill-mode:forwards;

四、2D动画的具体实现

1.奔跑熊

代码如下（示例）：

    <style>
        body {
            background-color: #ccc;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 400px;
            background: url(media/bg1.png) no-repeat;
            animation: bg1 30s linear;
        }
        
        div {
            position: absolute;
            top: 200px;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            animation: bear 1s steps(8) infinite, move 4s forwards;
        }
        
        @keyframes bg1 {
            0% {
                background-position: 0, 0;
            }
            100% {
                background-position: -2340px 0;
            }
        }
        
        @keyframes bear {
            0% {
                background-position: 0, 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translate(-50%);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
    </div>
</body>

效果如下（示例）：
在这里插入图片描述

2.盒子进圈

代码如下（示例）：

<style>
        div {
            width: 200px;
            height: 200px;
            background: url(1.png);
        }
        
        .box {
            width: 39px;
            height: 39px;
            background: url(wz.jpg);
            animation: move 4s linear 1s forwards;
        }
        
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }
            10% {
                transform: translate(160px, 0);
            }
            20% {
                transform: translate(160px, 160px);
            }
            30% {
                transform: translate(0, 160px);
            }
            40% {
                transform: translate(0, 40px);
            }
            50% {
                transform: translate(120px, 40px);
            }
            60% {
                transform: translate(120px, 120px);
            }
            70% {
                transform: translate(40px, 120px);
            }
            80% {
                transform: translate(40px, 80px);
            }
            100% {
                transform: translate(80px, 80px);
            }
        }
    </style>
</head>

<body>
    <div>
        <div class="box"></div>
    </div>
</body>