css动画和过渡

最新推荐文章于 2023-10-16 17:00:25 发布

巴乐┏

最新推荐文章于 2023-10-16 17:00:25 发布

阅读量177

点赞数

分类专栏： css动画 css过渡 CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44276627/article/details/117636036

版权

CSS 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

css动画

1 篇文章 0 订阅

订阅专栏

css过渡

1 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS动画和过渡的概念，包括如何定义动画、过渡的属性如duration、timing-function等，以及如何通过@keyframes创建自定义动画。通过一个具体的HTML/CSS示例，展示了如何应用这些概念，实现元素的平滑变化效果。

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

css动画和过渡

定义

CSS 动画：动画使元素逐渐从一种样式变为另一种样式。利用动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

css过渡：一个元素的初始状态和最终状态，从初始到最终，使用过渡就避免生硬转变。

属性

property 指定要过渡的CSS属性
duration 指定过渡的时间
timing-function 速度曲线，比如匀速，先慢后快
delay 延迟开始执行过渡效果的时间
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

@keyframes 规定动画

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

border-radius 属性给div元素添加圆角的边框

animation-delay 属性定义动画什么时候开始。animation-delay 值单位可以是秒（s）或毫秒（ms）

animation-direction 属性定义是否循环交替反向播放动画

animation-duration属性定义动画完成一个周期需要多少秒或毫秒。

animation-iteration-count属性定义动画应该播放多少次。

animation–play-state属性指定动画是否正在运行或已暂停。

例如


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" style="width: 100%;height: 700px;">
        <div style="width: 600px;height: 600px; background-color: cyan;">
            <div class="an"></div>
        </div>
    </div>
</body>
<style>
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .an{
        width: 100px;
        height: 100px;
        animation-name: myfirst;
        position: relative;
        animation-duration: 6s;
        animation-timing-function: linear;
        animation-delay: 1s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state:running;
    }

    @keyframes myfirst
    {
        0%   {background: red; left:0px; top:0px; border-radius: 0%;}
        25%  {background: yellow; left:500px; top:0px;border-radius: 25%;}
        50%  {background: blue; left:500px; top:500px;border-radius: 50%;}
        75%  {background: green; left:0px; top:500px;border-radius: 25%;}
        100% {background: red; left:0px; top:0px;border-radius: 0%;}
    }
</style>
</html>