CSS动画基础

E___V___E

已于 2024-04-25 00:00:49 修改

阅读量1.1k

点赞数 21

CC 4.0 BY-SA版权

文章标签： css 前端

于 2024-02-21 17:59:58 首次发布

本文链接：https://blog.csdn.net/E___V___E/article/details/136206011

本文详细介绍了CSS中的2D和3D变换（如位移、旋转和缩放），以及如何使用`transform-origin`设置转换中心点。还涵盖了动画的创建，包括定义动画（keyframes）、使用动画属性（如duration、timing-function、delay等）和浏览器私有前缀的考虑。

转换transform 我们简单理解就是变形有2D和3D之分

我们暂且学了三个分别是位移旋转和缩放

2D移动translate（x，y）最大的优势是不影响其他盒子，里面参数用％，是相对于自身宽度和高度来计算的

可以分开写比如translateX（x）和translateY（y）

2D 旋转 rotate（度数）可以实现旋转元素度数的单位是deg

2D缩放sacle（x，y）里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子

设置转换中心点transform—origin：xy；参数可以百分比、像素或者是方位名词

当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前

制作动画分为两步：

1．先定义动画

2．再使用（调用）动画

1．用keyframes定义动画（类似定义类选择器）

＠keyframes 动画名称｛

08{

切 width:100px; }

100%{

width:200px;

}

2．元素使用动画

div {

width:200px; height: 200px;

background-color: aqua; margin: 100px auto; ／＊调用动画＊／

animation-fpame：动画名称； ／＊持续时间＊／

animation-duration：持续时间； }


<style>

／＊我们想页面一打开，一个盒子就从左边走到右边＊／ ／＊1．定义动画＊／

@keyframes move{ ／＊开始状态＊／ 0% {

transform: translateX(θpx); }

／＊结束状态＊／ 100% {

transform: translateX(1000px); }
}

div {

width:200px; 

height:200px; 

background-color：red； ／＊2．调用动画＊／／＊动画名称＊／

animation-name:move; ／＊持续时间＊／

animation-duration: 2s; 

}
</style>

动画序列：0％是动画的开始，100％是动画的完成。这样的规则就是动画序列

在＠keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

·动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。

·请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0％和100％。

animation-duration是动画持续时间，老师前面没讲吧

@keyframes move {
0% {
transform: translate(0, 0);
} I
25% {
transform: translate(1000px, 0)
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(。. 0);
}
}
div {
width: 100px;
height: 100px;
background-color: ・pink;
animation-name: move;
animation-duration: 10s; 
}
/* 1.可以做多个状态的变化keyframe关键慎*/
/* 2.里面的百分比要是整数*/
/* 3.里面的百分比就是总的时间（我们这个案例16s）的划分25% * 10 = 2.5s */

动画属性

@keyframes 规定动画.
animation 所有动画属性的简写属性，除了animation-pby-state属性.
animation-name 规定@keyframes动画的名称。（必磔9 ）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function 规定动画的速度曲线，默认是"ease".
animation-delay 规定动画何时开始，默认是0。
animation-iteration-count 规定动画被播放的次数,默认是1 ,还有infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是“normal” ,alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是.running，还有.pause。
animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

其实不用特地记顺序，除了name和两个时间，其余不分顺序

animation :动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
• 简写属性里面不包含animation-play-state
• 暂停动画：animation-play-state: puased;经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来：animation-direction : alternate
• 盒子动画结束后,停束位置：animation-fill-mode : forwards

div{
width:100px;
height:100px;
background-color:blue;
animation-name:move;
/*持续时间*/
/* animation-duration: 2s; */
/*运动曲线*/
/* animation-timing-function: ease; */
/*何时开始*/
animation-delay: Is;
/*重复次数iteration重复的conut次数infinite无限*/
/* animation-iteration-count: infinite; */
/*是否反方向播放默认的是normal如果想要反方向就写alternate */
/* animation-direction: alternate; */
/*动画结束后的状态默认的是backwards回到起始状态我们可以让他停留在结束状态forwards */
/* animation-fill-mode: forwards; */
/* animation: name duration timing-function delay iteration-count direction fill-mode：
/* animation: move 2s linear ps 1 alternate forwards; */
/*前面2个属性name duration 一定要写*/
/* animation: move 2s linear 0s 1 alternate forwards; */
div:hover {
/*鼠标经过div让这个div停止动画，鼠标离开就继续动画*/
animation-play-state: paused；
}

热力图案例

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

<style>
.city div[classA="pulse"] {
/ * 保证我们小波纹 在父盒子里面水平垂直居中放大之后就会中心向四周发散*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shade : 0 0 12px B#009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse {
0% {}
70% {
/*transform: scale(5);我们不要用scale因为他会让阴影变大*/
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;

}


</style>
/*直接top0left0不行吗，反正和pulse和dotted一样大*/
/*我试过的情况是影子top, left都为0%才居中*/
/*用scale会把阴影也放大 不能用scale 下边垂直居中使用了 transform 赋值是移动位置 
 然后动画里再去使用transform的时候 没用transition属性  圆圈就会跑到 -50% 以前的位置了*/
<body>
    <div class="map">
        <div class="city">
            <div class="dotted"></div>
            <div class="pulsel"></div>
            <div class="pulse2"></div>
            <div class="pulse3"></div>
        </div>
    </div>
</body>

animation-timing-function :规定动画的速度线,默认是"ease"

linear 动画从头到尾的速度是相同的.匀速
ease 默认.动画以低速开始，然后力映.在结束前变慢
ease-in 动画以低速开始.
ease-out 动画以低速结束.
ease-in-out 动画以低速开始和结束.

steps（）指定了时间函数中的间隔数量（步长）

<style>
    div {
        overflow: hidden;
        font-size: 20px;
        width: 0;
        height: 30px;
        background-color:pink;
        /*让我们的文字强制一行内显示*/
        white-space: nowrap;
        /* steps就是分儿展来完成我们的动画有了steps就不要在写ease或者linear*/
        animation: w 4s steps(10) forwards;
}
©keyframes w {
        0% {
        width: 0;
        }
        100% {
        width: 200px;
        }
    }
</style>

奔跑的熊

让一个图片循环滚动

<style>
    body {
        background-color: ■井ccc;
        }
    div {
        position: absolute;
        width: 200px;
        height: l00px;
        background: url(media/bear.png) no-repeat;
        /*我们元素可以添加多个动画.用逗号分隔*/
        animation: bear 1s steps(8) infinite, move 3s forwards;
        } 
    @keyframes move {
    0% {
        left: 0;
    }
    100% {
        left: 50%;
    /* margin-left: -100px; */
        transform: translateX(-50%);
    }
    </style>
    </head>
<body>
    <div></div>
</body>

3D转换

<style>
div{
width: 200px;
height:
background-color： Hpink;
transform: translateX(100px);
transform: translateY(100px); 
/* transform: translateX(18@px) translateY(100px) translateZ(100px);
1. translateZ 沿若Z轴移动 
/* 2. translateZ后面的单位我10 •般跟px
/* 3. translateZ(lB0px)向外符/力工06px(向我*1的眼睛来移动的)*/
/* 4.3D移动行司号的方法
/* transform: translate3d(x,y,z); */
/* transform: translate3d(106px, 100px3 100px); */
/* 5. xyz是不能省略的，如果没有就？e */
transform: translate3d(8,80px 160px);
</style>
</head>
<body>
<div></div>
</body>