从左上翻转下来的文字动画

作者: Lia代码猪崽 | 来源:发表于2019-02-16 11:27 被阅读1次

从左上翻转下来的文字动画
从右下翻转到左上再回位的文字动画
iOS 动画
立体翻转动画
3.5-Canvas基础
iOS UIView 常用动画（UIView的翻转、旋转，偏移，
iReader 多看等小说阅读软件打开的书动画实现
UIButton 文字居左上
Animation总结一
React Native 实现翻转动画

动画效果

这里主要有四个动画效果的变化：

字的大小，是从大到小的，可用transform的scale
字的位置，是从左上到右下，可用transform的translate
字的透明度，渐渐变清晰，可用opacity
字的角度，从倒转到摆正，可用transform的rotate

但，又注意到，字母是一个一个出现的，所以可以把他们放在span里，然后修改它的animation-delay。由于span标签是行内元素，不能修改大小，那transform的scale属性将会失去作用，所以要再加个display: inline-block;

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Text animation Left Flip</title>
    <style>
        .container {
            margin: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
            color: #24a8e6;
        }
        .left-flip span{
            /*行内块级才能 transform 属性*/
            display: inline-block;
            animation: revolveScale .4s forwards;
            opacity: 0;
        }
        @keyframes revolveScale {
            0% {
                transform: translate(-150px, -50px) rotate(-180deg) scale(3);
                opacity: 0;
            }
            60% {
                transform: translate(20px, 20px) rotate(30deg) scale(.3);
            }
            100% {
                transform: translate(0) rotate(0) scale(1);
                opacity: 1;
            }
        }
        .left-flip span:nth-of-type(2) {
            animation-delay: .1s;
        }
        .left-flip span:nth-of-type(3) {
            animation-delay: .2s;
        }
        .left-flip span:nth-of-type(4) {
            animation-delay: .3s;
        }
        .left-flip span:nth-of-type(5) {
            animation-delay: .4s;
        }
        .left-flip span:nth-of-type(6) {
            animation-delay: .5s;
        }
        .left-flip span:nth-of-type(7) {
            animation-delay: .6s;
        }
        .left-flip span:nth-of-type(8) {
            animation-delay: .7s;
        }
        .left-flip span:nth-of-type(9) {
            animation-delay: .8s;
        }
        .left-flip span:nth-of-type(10) {
            animation-delay: .9s;
        }
        .left-flip span:nth-of-type(11) {
            animation-delay: 1s;
        }
        /*按钮样式*/
        .repeat {
            padding: 5px;
            font-size: 12px;
            text-decoration: none;
            color: rebeccapurple;
            border: 1px solid #24a8e6;
        }
    </style>
</head>
<body>
<div class="container left-flip" >
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
    &nbsp;
    <span>W</span>
    <span>o</span>
    <span>r</span>
    <span>l</span>
    <span>d</span>
    <span>!</span>
    <a class="repeat" href="javascript:void(0);">Repeat Animation</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
    $('.repeat').click(function () {
        var $container = $('.container')
        $container.removeClass('left-flip')
        setTimeout(function () {
            $container.addClass('left-flip')
        }, 20)
    })
</script>
</body>
</html>

从右上也同理，只需要将初始位置修改一下就好：

transform: translate(150px, -50px) rotate(-180deg) scale(3);

效果

完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Text animation Right Flip</title>
    <style>
        .container {
            margin: 0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
            color: #24a8e6;
        }
        .left-flip span{
            /*行内块级才能 transform 属性*/
            display: inline-block;
            animation: revolveScale .4s forwards;
            opacity: 0;
        }
        @keyframes revolveScale {
            0% {
                transform: translate(150px, -50px) rotate(-180deg) scale(3);
                opacity: 0;
            }
            60% {
                transform: translate(20px, 20px) rotate(30deg) scale(.3);
            }
            100% {
                transform: translate(0) rotate(0) scale(1);
                opacity: 1;
            }
        }
        .left-flip span:nth-of-type(2) {
            animation-delay: .1s;
        }
        .left-flip span:nth-of-type(3) {
            animation-delay: .2s;
        }
        .left-flip span:nth-of-type(4) {
            animation-delay: .3s;
        }
        .left-flip span:nth-of-type(5) {
            animation-delay: .4s;
        }
        .left-flip span:nth-of-type(6) {
            animation-delay: .5s;
        }
        .left-flip span:nth-of-type(7) {
            animation-delay: .6s;
        }
        .left-flip span:nth-of-type(8) {
            animation-delay: .7s;
        }
        .left-flip span:nth-of-type(9) {
            animation-delay: .8s;
        }
        .left-flip span:nth-of-type(10) {
            animation-delay: .9s;
        }
        .left-flip span:nth-of-type(11) {
            animation-delay: 1s;
        }
        /*按钮样式*/
        .repeat {
            padding: 5px;
            font-size: 12px;
            text-decoration: none;
            color: rebeccapurple;
            border: 1px solid #24a8e6;
        }
    </style>
</head>
<body>
<div class="container left-flip" >
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>
    &nbsp;
    <span>W</span>
    <span>o</span>
    <span>r</span>
    <span>l</span>
    <span>d</span>
    <span>!</span>
    <a class="repeat" href="javascript:void(0);">Repeat Animation</a>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
    $('.repeat').click(function () {
        var $container = $('.container')
        $container.removeClass('left-flip')
        setTimeout(function () {
            $container.addClass('left-flip')
        }, 20)
    })
</script>
</body>
</html>