css3中animation可以同时加载2个动画吗？

问题描述

问 题

请问如何给一个div加载2个动画用css3

解决方案

https://jsfiddle.net/ccchangk...

<img src="1.png" class="a1" />

第一一秒的透明度动画，第二是延迟一秒的一秒循环位移动画

    .a1 {
        animation: a1 1s,a2 1s infinite 1s;
    }
    
    @keyframes a1 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes a2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20%);
        }
        100% {
            transform: translateY(0);
        }
    }

这篇关于css3中animation可以同时加载2个动画吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！