CSS animation with delay and opacity
Just don't set the initial opacity on the element itself, set it within the @keyframes:
#element{
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}
@keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
This technique takes the delay off of the animation, so that it starts running immediately. However, the opacity won't really change until about 66% into the animation. Because the animation runs for 3 seconds, it gives the effect of a delay for 2 seconds and fade in for 1 second.
See working example here: https://jsfiddle.net/75mhnaLt/
You might also want to look at using conditional comments for older browsers; IE8 and IE9.
Something like the following in your HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en-GB"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8 ie-7" lang="en-GB"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9 ie-8" lang="en-GB"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-GB"> <!--<![endif]-->
You could then do something like:
.lt-ie9 #element {
opacity: 1;
}
CSS3 Fade-In Delay?
Your code is correct, but you must add some property to the .centraltext, because it should not be visible until the animation is applied (opacity: 0 in JSFiddle example).
And also add the property animation-fill-mode to preserve the style of the last frame.
Example: JSFiddle
.centraltext {
...
opacity: 0;
animation-fill-mode: forwards;
}
Elements with animation delay briefly appear before fading in using purely CSS3 Keyframes (no JS)
While the option suggested by Vito is not wrong, it is better to actually achieve this using properties or settings that are specifically designed for this purpose.
The element is visible at start because during the animation's delay period, the properties specified in the @keyframe rules will not have any effect on the element. The element would continue to be in the state that is mentioned outside of the @keyframes. Here there is no opacity specified outside of the @keyframe rules and so the default value of 1 is used and the element becomes visible.
Below is what the CSS specs for Animations say about this:
Furthermore, typically an animation does not affect the computed value before the animation delay has expired or after the end of the animation, but may do so depending on the animation-fill-mode property.
Once the animation starts (that is, the delay expires), the element will get the properties specified with in the @keyframes rules applied to it (depending on the animation's progress from 0 - 100). So, its first invisible then becomes visible as it slides in.
The way to force the browser to apply the properties specified within the @keyframes rules during the delay period is to use animation-fill-mode as backwards. But in your case, the animation fill mode is already set as forwards and hence you should change it to both. A value of both means that it will respect the specifications of both forwards (that is, hold the state as at last keyframe once the animation is completed) and also of backwards (that is, hold the state as at its first keyframe when it's in the delay period).
Below is an extract from the MDN page on animation-fill-mode property:
backwards
The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. The first relevant keyframe depends on the value of animation-direction:
both
The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.
In short, the below is what you need to do. Note, the change that I've made at the end of animation property's value. I've left out the other properties for brevity, they are present in the demo.
.header-banner h2 {
/* other props removed for brevity */
animation: slide-in 1s 0.2s both;
}
.header-banner a {
animation: slide-in 1s 0.4s both;
}
@charset "UTF-8";
/* CSS Document */
/***************************************************************
GENERAL
***************************************************************/
* {
font-family: 'Varela', sans-serif;
}
body {
padding: 0;
margin: 0;
background-color: rgb(90, 120, 240);
}
a {
text-decoration: none;
color: inherit;
font-size: inherit;
}
/***************************************************************
HEADER
***************************************************************/
/*****************************
BANNER
*****************************/
.header-banner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-top: 30px;
height: 250px;
-webkit-animation: slide-in 1s;
-moz-animation: slide-in 1s;
-o-animation: slide-in 1s;
animation: slide-in 1s;
}
.header-banner h1,
.header-banner h2,
.header-banner a {
font-family: 'Varela', sans-serif;
color: white;
text-align: center;
padding: 0 40px;
margin: 10px 0;
}
.header-banner h2,
.header-banner a {
font-weight: normal;
}
.header-banner h1 {
font-size: 3em;
-webkit-animation: slide-in 1s;
-moz-animation: slide-in 1s;
-o-animation: slide-in 1s;
animation: slide-in 1s;
}
.header-banner h2 {
font-size: 1.5em;
-webkit-animation: slide-in 1s 0.2s both;
-moz-animation: slide-in 1s 0.2s both;
-o-animation: slide-in 1s 0.2s both;
animation: slide-in 1s 0.2s both;
}
.header-banner a {
font-size: 1.1em;
font-weight: bolder;
padding: 15px 40px;
border-radius: 5px;
letter-spacing: 0.05em;
background-color: rgb(0, 221, 221);
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
transition: 0.3s ease-in-out;
margin-top: 60px;
-webkit-animation: slide-in 1s 0.4s both;
-moz-animation: slide-in 1s 0.4s both;
-o-animation: slide-in 1s 0.4s both;
animation: slide-in 1s 0.4s both;
}
.header-banner a:hover {
transition: 0.3s ease-in-out;
box-shadow: 0 6px 10px rgba(50, 50, 93, .16), 0 2px 10px rgba(0, 0, 0, .1);
transform: translateY(-2px);
}
/***************************************************************
KEYFRAMES
***************************************************************/
@-o-keyframes slide-in {
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes slide-in {
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@-webkit-keyframes slide-in {
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes slide-in {
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}<!doctype html>
<link href="https://fonts.googleapis.com/css?family=Varela" rel="stylesheet"
<header>
<div class="header-banner">
<h1><h1> element (no delay)</h1>
<h2>I'm an <h2> element with 0.2s of delay</h2>
<a href="about.html">I'm an <a> element with 0.4s of delay</a>
</div>
</header>delaying an animation for x seconds with css
transition-delay is wrong. It is about the transition. The equivalent of that is: animation-delay. use animation-duration: 14s for the time of running animation. or:
.element {
-webkit-animation: fadeinout 14s linear forwards;
animation: fadeinout 14s linear forwards;
opacity: 0;
width: 100px;
height: 100px;
background-color: red;
}
@-webkit-keyframes fadeinout {
14% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeinout {
14% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; }
}<div class="element"></div>CSS: animation delay on only one animation
I added a delay of 4 secs to the final animation below. For visibility purpose, I set the duration of each animation to 2 secs.
div {
width: 200px;
height: 200px;
opacity: 0.3;
background-color: darkgray;
animation:2000ms radius-in forwards, 2000ms opacity-in forwards, 2000ms 4000ms opacity-out forwards;
}
@keyframes radius-in {
from { border-radius: 0; }
to { border-radius: 25px; }
}
@keyframes opacity-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes opacity-out {
from { opacity: 1; }
to { opacity: 0.3; }
}<div></div>Removing the delay on text animation - HTML/CSS
You need to play around with the animation duration and also adjust the key frames percentages -> the tween in when you are flipping the text using your transform/opacity rules.
I have slightly adjusted each, but this comes down to a taste in how you want it to look and feel. Spreading the flipping animation over more of a percent (your tween) will lessen the amount of time you have in a pause between animations.
/*Vertical Flip*/
.verticalFlip {
display: inline;
}
.verticalFlip span {
animation: vertical 3.4s linear infinite 0s;
-ms-animation: vertical 3.4s linear infinite 0s;
-webkit-animation: vertical 3.4s linear infinite 0s;
color: #ea1534;
opacity: 0;
overflow: hidden;
position: absolute;
}
.verticalFlip span:nth-child(2) {
animation-delay: 2s;
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
}
/*Vertical Flip Animation*/
@-moz-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-moz-transform: rotateX(180deg);
}
35% {
opacity: 1;
-moz-transform: translateY(0px);
}
55% {
opacity: 1;
-moz-transform: translateY(0px);
}
80% {
opacity: 0;
-moz-transform: translateY(0px);
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-webkit-transform: rotateX(180deg);
}
35% {
opacity: 1;
-webkit-transform: translateY(0px);
}
55% {
opacity: 1;
-webkit-transform: translateY(0px);
}
80% {
opacity: 0;
-webkit-transform: translateY(0px);
}
95% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes vertical {
0% {
opacity: 0;
}
15% {
opacity: 0;
-ms-transform: rotateX(180deg);
}
35% {
opacity: 1;
-ms-transform: translateY(0px);
}
55% {
opacity: 1;
-ms-transform: translateY(0px);
}
80% {
opacity: 0;
-ms-transform: translateY(0px);
}
95% {
opacity: 0;
}
100% {
opacity: 0;
}
}
/* text */
#hero h1 {
margin: 0;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: url("https://lovelytab.com/wp-content/uploads/2019/01/Tumblr-Aesthetic-Wallpapers-Free.jpg") repeat;
background-clip: text;
-webkit-background-clip: text;
}<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="verticalFlip"><span>Change</span><span>Text</span></div>
</h1>
</section>Related Topics
Twitter Bootstrap - Same Heights on Fluid Columns
:Hover:Before Text-Decoration None Has No Effects
How to Align About the Colon in Each Line of Text Like Movie Credits Often Do
@Font Face Choppy Font in Chrome
How to Use Google Web Fonts in an HTML Email
Adding Hover Effects for Links in Image Map (Area)
Border-Radius CSS Property Curve Outside
Applying a Single Background Gradient to a Table Row
How to Make Half-Square Background in CSS
Ie Background Size Not Working
Font Smoothing Techniques? Text-Shadow Rendering Differently in Chrome 14.0.833.0 or Higher
Cause Line to Wrap to New Line After 100 Characters
Can You CSS Blur Based on a Gradient Mask
Control CSS Variable from Angular 5
Curved Plane Surface in CSS3 or Three.Js