【Css】Css3 动画有哪些

原创已于 2024-05-23 17:23:11 修改 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

📌Css

于 2022-12-15 14:53:12 首次发布

本文介绍了CSS3动画的基础概念，包括过渡、变换和自定义动画三种实现方式。详细解析了transition、transform及animation属性的使用方法，并提供了实例代码。

Css3 动画是什么？

CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块；
即指元素从一种样式逐渐过渡为另一种样式的过程；
常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合；

Css3实现动画的方式，有如下几种？

transition 实现渐变动画
transform 转变动画
animation 实现自定义动画

Css3实现动画实现方式

第一种：transition 实现渐变动画属性如下：

transition-property ：设置过渡效果的css属性名称，常用值 “all”全部css属性进行动画效果添加
transition-duration ：规定完成过渡效果需要多少秒或毫秒
transition-timing-function ：指定过渡函数，规定速度效果的速度曲线常用值：关键字描述：linear ease-in ease-in-out
transition-delay ：指定开始出现的延迟时间

其中 transition-timing-function 的值有如下：

值	描述
linear	匀速（等于 cubic-bezier(0,0,1,1)）
ease	从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)）
ease-in	慢慢变快（等于 cubic-bezier(0.42,0,1,1)）
ease-out	慢慢变慢（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

注意：并不是所有的属性都能使用过渡的，如display:none<->display:block

举个例子，实现鼠标移动上去发生变化动画效果!

<style>
    .base {
         width: 100px;
         height: 100px;
         display: inline-block;
         background-color: #0EA9FF;
         border-width: 5px;
         border-style: solid;
         border-color: #5daf34;
         transition-property: width, height, background-color, border-width;
         transition-duration: 2s;
         transition-timing-function: ease-in;
         transition-delay: 500ms;
    }

    /*简写  all => 全部执行 200毫秒内执行完成 以线性方式执行*/
    /*transition: all 2s ease-in 500ms;*/
    .base:hover {
         width: 200px;
         height: 200px;
         background-color: #5daf34;
         border-width: 10px;
         border-color: #3a8ee6;
    }
</style>
<div class="base"></div>

第二种： transform 转变动画

包含四个常用的功能：

translate：位移
scale：缩放
rotate：旋转
skew：倾斜

一般配合transition过度使用

注意的是，transform不支持inline元素，使用前把它变成block；

2D 转换之移动 translate

transform: translate(x,y);
transform: translateX(2em);
transform: translateY(3in);

定义 2D 转换，沿着 X 和 Y 轴移动元素
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

transform:rotate(angle)

角度为正时，顺时针，负时，为逆时针

transform:rotate(45deg)
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);

默认旋转的中心点是元素的中心点

/* 设置旋转中心点*/
transform-origin: x y;

注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点（50% 50%）
还可以给x y 设置像素或者方位名称（top bottom left right center）

2D 转换之缩放scale

transform: scale(x,y);
transform: scaleX(2);
transform: scaleY(0.5);

transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
transform:scale(2,2) ：宽和高都放大了2倍
transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5)：缩小

注意：

只能转换由盒模型定位的元素。
同时使用多个转换，其格式为，其顺序会影转换的效果。（先旋转会改变坐标轴方向）：

transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);

第三种： animation 实现自定义动画

animation是由 8 个属性的简写，分别如下：

属性	描述	属性值
animation-duration	指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0
animation-timing-function	指定动画计时函数，即动画的速度曲线，默认是 "ease"	linear、ease、ease-in、ease-out、ease-in-out
animation-delay	指定动画延迟时间，即动画何时开始，默认是 0
animation-iteration-count	指定动画播放的次数，默认是 1
animation-direction 指定动画播放的方向	默认是 normal	normal、reverse、alternate、alternate-reverse
animation-fill-mode	指定动画填充模式。默认是 none	forwards、backwards、both
animation-play-state	指定动画播放状态，正在运行或暂停。默认是 running	running、pauser
animation-name	指定 @keyframes 动画的名称

CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

通过 @keyframes 来定义关键帧

因此，如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

@keyframes rotate{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

from 表示最开始的那一帧，to 表示结束时的那一帧

也可以使用百分比刻画生命周期

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

定义好了关键帧后，下来就可以直接用它了：

animation: rotate 2s;

三、总结

属性	含义
transition（过度）	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform（变形）	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）	只是transform的一个属性值，即移动
animation（动画）	用于设置动画属性，他是一个简写的属性，包含6个属性

标签

#css