animate.css源码分析--bounce(弹跳效果)

最新推荐文章于 2024-05-07 11:59:32 发布

woollllll

最新推荐文章于 2024-05-07 11:59:32 发布

阅读量1.1w

点赞数 5

分类专栏： css 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/zhaozjc112/article/details/53099086

版权

本文深入分析了animate.css中bounce动画的实现原理，包括关键的CSS属性如`animation-duration`、`animation-fill-mode`和`transform-origin`等，并通过时间轴梳理了动画过程。文章还探讨了使用ease-out和ease-in替换贝塞尔曲线来实现4次弹跳的可能性，并设计了一个新的弹跳动画方案。最后提供了animate.css的下载链接。

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

animate.css是一个不错CSS3预设动画库,是很好的CSS3动画学习资源,下面来剖析下bounce效果的实现原理,在此基础上实现自己的CSS动画。

先从animate.css把bounce效果单独移出来，暂不考虑针对不同的浏览器的支持,测试浏览器为chrome,看一下效果。

<!DOCTYPE html>
<html>
<head>
    <title>bounce-source</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, minimal-ui" />
    <style type="text/css">
        html {
            font: 100%/1.5 "Roboto", Verdana, sans-serif;
            color: #3d464d;
            background-color: #fff;
            -webkit-font-smoothing: antialiased;
            width: 100%;
            overflow: hidden-x;
            text-align: center;
        }
        .font-style{
            color: #f35626;
            background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-animation: hue 10s infinite linear;
        }
        h1{
            margin-bottom: 1.5rem;
            font-size: 6rem;
            font-weight: 100;
            line-height: 1;
            letter-spacing: -.05em;
        }
        @-webkit-keyframes hue {
          from {
            -webkit-filter: hue-rotate(0deg);
          }

          to {
            -webkit-filter: hue-rotate(-360deg);
          }
        }
    </style>
    <style type="text/css">
        .animated {
          animation-duration: 1s;
          animation-fill-mode: both;
        }

        .animated.infinite {
          animation-iteration-count: infinite;
        }
        .bounce {
          animation-name: bounce;
          transform-origin: center bottom;

最低0.47元/天解锁文章

woollllll

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
animate.css源码分析--bounce(弹跳效果)

animate.css是一个不错CSS3预设动画库,是很好的CSS3动画学习资源,下面来剖析下bounce效果的实现原理,在此基础上实现自己的CSS动画。先从animate.css把bounce效果单独移出来，暂不考虑针对不同的浏览器的支持,测试浏览器为chrome,看一下效果。html>head> title>bounce-sourcetitle> meta ch
复制链接

扫一扫