CSS3坠落效果的研究

因为有一个的重力下坠效果需要实现 发现ease-out效果极不理想 于是就研究了一下animation-timing-function
看了一眼 贝塞尔曲线这种东西岂能难倒我这个oh shit ura mapper
有反弹效果的贝塞尔 cubic-bezier(1, 0, 0.8, 1.2)
无反弹效果的贝塞尔 cubic-bezier(0.8, 0, 1, 0.5)
向下投掷效果 cubic-bezier(1, -0.6, 0.8, 1.5)

//角落坠落反弹效果 正方形
     @keyframes drop {
        0% {
            opacity: 1;
            transform-origin: top left;
        }
        60% {
            transform: translate(0, 120%) rotate(3deg);
            transform-origin: top left;
            opacity: 1;
        }
        80% {
            transform: translate(-5%, 127%);
            transform-origin: top left;
            opacity: 1;
        }
        100% {
            transform: translate(-5%, 127%);
            transform-origin: top left;
            opacity: 0;
        }
    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.