css之动画与3D

最新推荐文章于 2024-09-24 11:41:48 发布

新椅子

最新推荐文章于 2024-09-24 11:41:48 发布

阅读量574

点赞数 18

文章标签： css 3d 前端

本文链接：https://blog.csdn.net/2302_80152806/article/details/136983998

版权

本文详细介绍了CSS动画的基础概念，包括如何用关键帧定义动画、动画序列的规则、调用动画的方法，以及动画的常用属性如速度曲线、3D转换（移动、透视和旋转）和3D呈现模式。

摘要由CSDN通过智能技术生成

动画

动画的基本使用

定义动画

用keyframes定义动画

@keyframes 动画名称｛

0%｛

width：100px；

｝

100%｛

width：200px；

｝

动画序列

％是动画的开始，100％是动画的完成。这样的规则就是动画序列。
@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0％和100%。

调用动画

<style>
    @keyframes wid {
        0% {
            width: 100px;
        }

        100% {
            width: 500px;
        }
    }

    div {
        background-color: black;
        height: 500px;
        width: 500px;
        margin: 300px auto;


    }

    div:hover {
        /* 调用动画 */
        animation-name: wid;
        /* 持续时间 */
        animation-duration: 5s;

    }
</style>

<body>
    <div>123</div>
</body>

动画常用属性

属性	描述
@keyframes	描述动画
animation	所有动画属性的简写属性（除了animation-play-state属性）
animation-name	需要调用动画的名称（@keyframes动画名称）
animation-duration	规定动画完成一个周期花费的时间（默认为0）
animation-timing-function	规定动画的速度曲线（默认为ease）
animation-delay	规定动画何时开始（默认为0）
animation-iteration-count	规定动画被播放的次数（默认为0，infinite为无限播放）
animation-direction	规定动画是否在下一周期逆向播放（默认为normal，alternate为逆播放）
animation-play-state	规定动画是否正在运行或暂停（默认为running，paused为暂停）
animation-fill-mode	规定动画结束后状态（forwards为保持结束状态，backwards为回到起始状态）

动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态；

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

速度曲线调节

animation-timing-function：规定动画的速度曲线，默认是"ease"

值	描述
linear	动画从头到尾的速度是相同的。匀速
ease	默认，以低速开始，然后加快，在介绍前变慢。
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）