CSS3动画Animation总结

最新推荐文章于 2024-05-06 19:28:55 发布

yqdidy

最新推荐文章于 2024-05-06 19:28:55 发布

阅读量194

点赞数

分类专栏：学习记录—页面style相关文章标签： css3 动画 css

本文链接：https://blog.csdn.net/yqdid/article/details/127097497

版权

学习记录—页面style相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考：https://www.w3school.com.cn/css/css3_animations.asp

什么是CSS动画？

如需使用 CSS 动画，必须首先为动画指定一些关键帧。
关键帧包含元素在特定时间所拥有的样式。

使用：

@keyframes 规则：
指定css样式，动画将在特定时间逐渐从当前样式更改为新样式。
@keyframes 规则的关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成））
animation-name 表示定义的keyframes 规则名称
animation-duration 定义需要多长时间才能完成动画
animation-delay 属性规定动画开始的延迟时间。负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。

animation-iteration-count 属性指定动画应运行的次数。使用值== “infinite” ==使动画永远持续下去.
animation-direction 属性指定是向前播放、向后播放还是交替播放动画。

值：
normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前

animation-timing-function 属性规定动画的速度曲线。

属性可接受以下值：
ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

使用样例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;//定义需要多长时间才能完成动画
  animation-delay: 2s;
}

//关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成））
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

可以产生动画的都是有中间值的属性。比如宽度高度width的变化 px 如果是border的属性类型 soild-double 没有中间属性变化是在一瞬间

案例：画跳动的小心心

在这里插入图片描述

<style>
    *{
        margin: 0;
        padding: 0;
    }
   body{
        display: flex;
        width: 100vw;
        height: 100vh;
        background-color: rgb(7, 28, 62);
        justify-content: center;
        align-items: center;
   }
    .heart{
        width: 200px;
        height: 200px;
        background-color: red;
        transform: rotate(45deg) scale(.5);/*旋转45度*/
        opacity: .5;
        animation-name: hd;
        animation-duration: 2s;
        animation-iteration-count: 100;
    }
    /*抖动的爱心*/
    @keyframes hd{
        25% {
            opacity: 1;
            transform: rotate(45deg) scale(1);
        }
        50% {
            opacity: .5;
            transform: rotate(45deg) scale(.5);
        }
        75% {
            opacity: 1;
            transform: rotate(45deg) scale(1);
        }
        85% {
            opacity: .5;
            transform: rotate(45deg) scale(.5);
        }
       to{
            opacity: 1;
            transform: rotate(45deg) scale(1);
        }

    }
    .heart::before{
        content: '';/*伪类必须设置content*/
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: red;
        transform: translateX(-100px);
    }
    .heart::after{
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-color: red;
        transform: translateY(-100px);
    }
</style>
<body>
    <div class="heart"></div>
</body>

小球动画

在这里插入图片描述

<style>
    *{
        margin: 0;
        padding: 0;
    }
   body{
        display: flex;
        width: 100vw;
        height: 100vh;
        background-color: rgb(246, 246, 247);
        justify-content: center;
        align-items: center;
   }
   .ball{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(at center, #e67e22, #e74c3c);
    animation-name: hd;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
   @keyframes hd{
    to{
        transform: translateY(-200px);
    }
   }
   /* 阴影 */
   section {
    width: 100px;
    height: 40px;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    transform: translateY(50px);
    z-index: -1;
    border-radius: 50%;
    /* 模糊滤镜 */
    filter: blur(5px);
    animation-name: shadow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
   }

   /* 阴影变化：尺寸、颜色 模糊程度 */
   @keyframes shadow{
    to{
        width: 300px;
        height: 20px;
        background-color: rgba(0, 0, 0, .3);
        filter: blur(35px);
    }
   }
</style>
<body>
    <div class="ball"></div>
    <section></section>
</body>
</html>