Question

我试图在第一个动画完成后开始动画，但我不知道该怎么做。我希望在第一个动画后2秒后将文本转到页面顶部。这是我的代码。谢谢:)）

CSS：

    @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300');

body {
    background-image: url("img/new_y_c_grad.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.entryText {
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    text-align: center;
    padding: 260px 0;
    font-size: 50px;

}

.animate {
    animation-duration: 1.2s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

.delay-150 {
    animation-delay: 150ms;
}

@keyframes anim-fade-in-up {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0)
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: none
    }
}


.anim-fade-in-up {
    animation-name: anim-fade-in-up
}

和HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Blank App</title>
    </head>
    <body>
        <script type="text/javascript" src="cordova.js"></script>
        <link rel="stylesheet" type="text/css" href="main.css">

        <h1 class="entryText animate anim-fade-in-up delay-150">Animation here</h1>

    </body>
</html>

Answer 1

您可以使用相同的关键帧来执行这两种动画，例如fiddle

.animate {
   animation-duration: 4s;
   animation-fill-mode: both; 
   animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

@keyframes anim-fade-in-up {
0% {
    opacity: 0;
    transform: translate3d(0, 30px, 0)
}
25% {
    opacity: 0.5;
}
50% {
    opacity: 1;
    transform: none;
    padding-top:260px;   
}
100% {
    opacity: 1;
    transform: none;
    padding-top:20px;
}

}

并增加动画持续时间

Answer 2

看看这支笔：http://codepen.io/TunderScripts/pen/ggOgWz

css

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation: example 4s linear, 4s dude 4s linear;
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: blue;
    left: 0px;
    top: 200px;
  }
  50% {
    background-color: green;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

@keyframes dude {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  100% {
    background-color: cyan;
    left: 0px;
    top: 200px;
  }
}

您可以创建所需的动画数量，也可以使用延迟甚至重叠来叠加它们。阅读此内容可获得更复杂的视图，了解这些参数的含义https://css-tricks.com/almanac/properties/a/animation/。祝你今天愉快！保持代码清洁！

在另一个动画（CSS / HTML）之后开始动画

2 个答案: