I'm trying to show the color gradient for Text 1,2, and 3 after the animation has completed on load.
You are able to see that Text 2 and Text 3 have a gradient but the problem I'm having is delaying the color gradient for "Text 1" because it starts as soon as the page loads. So the gradient is so quick you can't even see it.
I have tired animation delay on Text 1 but it's still too fast.
I hope this makes sense if not please let me know in the comments or if there could be a better name for the question.
Here is source code:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
*{
font-family: "Poppins" "sans-serif";
}
h1 {
margin: 0;
color: #fff;
letter-spacing: -0.03em;
}
.heading-line {
line-height: 1;
display: block;
position: relative;
text-align: center;
}
.heading-line::before {
line-height: 1;
display: block;
position: absolute;
color: #fff;
pointer-events: none;
width: 100%;
}
.heading-line-gradient {
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
/* 1st heading gradient */
#keyframes first_heading_gradient {
0%,
16.667% {
opacity: 1;
}
33.333%,
83.333% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* 1st heading white text */
#keyframes first_heading_white_text {
0%,
16.667% {
opacity: 0;
}
25%,
91.667% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes second_heading_gradient {
0%,
16.667% {
opacity: 0;
}
33.333%,
50% {
opacity: 1;
}
66.667%,
100% {
opacity: 0;
}
}
#keyframes second_heading_white_text {
0%,
25% {
opacity: 1;
}
33.333%,
50% {
opacity: 0;
}
58.333%,
100% {
opacity: 1;
}
}
#keyframes third_heading_gradient {
0%,
50% {
opacity: 0;
}
66.667%,
83.333% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes third_heading_white_text {
0%,
58.333% {
opacity: 1;
}
66.667%,
83.333% {
opacity: 0;
}
91.667%,
100% {
opacity: 1;
}
}
.heading-line-first>.heading-line-gradient {
background-image: linear-gradient(to left, #ed8936, #ed64a6);
animation-delay: 2s;
animation: first_heading_gradient 4s ;
}
.heading-line-first::before {
content: "Text 1";
animation-delay: 2s;
animation: first_heading_white_text 4s 2;
}
.heading-line-second>.heading-line-gradient {
background-image: linear-gradient(to left, #38b2ac, #0bc5ea);
animation: second_heading_gradient 4s ;
}
.heading-line-second::before {
content: "Text 2";
/* animation: second_heading_white_text 4s 2; */
}
.heading-line-third>.heading-line-gradient {
background-image: linear-gradient(to left, #ecc94b, #48bb78);
animation: third_heading_gradient 4s ;
}
.heading-line-third::before {
content: "Text 3";
/* animation: third_heading_white_text 4s 2; */
}
.tracking-in-expand {
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-1-4 16:26:19
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation tracking-in-expand
* ----------------------------------------
*/
#-webkit-keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
#keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
.text-focus-in {
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
* Generated by Animista on 2023-1-4 16:46:36
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation text-focus-in
* ----------------------------------------
*/
#-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
#keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
</style>
</head>
<body>
<!-- component style="background-color: #1a202c;"-->
<body>
<header>
<div class="w-full bg-cover bg-center " style="height:32rem; background-color:#1a202c;">
<div class="flex items-center justify-center h-full w-full bg-gray-900 bg-opacity-50">
<div class="text-center">
<p class="text-8xl font-bold text-white tracking-in-expand">Sample</p>
<h1 class="text-2xl font-normal text-focus-in">
<span class="heading-line heading-line-first py-2"><span class="heading-line-gradient">Text 1</span></span><span class="heading-line heading-line-second py-2"><span class="heading-line-gradient">Text 2</span></span>
<span class="heading-line heading-line-third py-2"><span class="heading-line-gradient">Text 3</span></span>
</h1>
</div>
</div>
</div>
</header>
</body>
</html>```
Related
I am currently working on an intro transition. Where the following should happen:
A Background-Color transition from a set of different background colors
A word swapping transition -> here should each word change with a fade in and out + blur transition
The basics are working pretty good here, but I can’t get my head around that the whole transition working simultaneously.
Especially the blur in and out transition isn't totally out of timing. I tried so many different values.
My Code:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(1250, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(1250, "linear");
});
},3000);
})();
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: #C0FF01; }
33% { color: #013334; }
66% { color: #C0FF01; }
100% { color: #C0FF01; }
}
#keyframes glow {
0% { background: #013334; }
33% { background: #C0FF01; }
66% { background: #8E7DD2; }
100% { background: #C0FF01; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
}
.intro-content p {
max-width: 1215px;
padding: 0 50px;
color: #C0FF01;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont 9s infinite;
animation-delay: 3s;
animation-timing-function: linear;
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: #013334;
animation: glow 9s infinite;
animation-delay: 3s;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms linear 0s infinite normal none;
animation-delay: 3s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
20%{
-webkit-filter: blur(0px);
}
40%{
-webkit-filter: blur(8px);
}
60%{
-webkit-filter: blur(8px);
}
80%{
-webkit-filter: blur(0px);
}
100%{
-webkit-filter: blur(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="intro-content">
<div class="intro-logo intro-claim">
<p>life is full of impressions. some of them remain. we create contemporary experiences, that people love to<span id="swap-text">Fade</span></p>
</div>
</header>
<div class="intro-background"></div>
Codepen:
https://codepen.io/Dennisade/pen/eYGBPjq
I think it is just a matter of having 4 different pendulums (animations) with varying time periods and balancing them. So I have made some changes to the time periods in your codepen, specifically css and js, see if this works for you.
CSS:
$transition: 500ms cubic-bezier(0.485, 0.355, 0.345, 0.950);
$green: #013334;
$lightblue: #E3EAF4;
$brightmood: #8E7DD2;
$yellow: #C0FF01;
$introvalue: 9s;
$introdelay: 3s;
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: $yellow; }
33% { color: $green; }
66% { color: $yellow; }
100% { color: $yellow; }
}
#keyframes glow {
0% { background: $green; }
33% { background: $yellow; }
66% { background: $brightmood; }
100% { background: $green; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
p {
max-width: 1215px;
padding: 0 50px;
color: $yellow;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont $introvalue infinite;
animation-delay: $introdelay;
animation-duration: 6s;
}
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: $green;
animation: glow $introvalue infinite;
animation-duration: 6s;
animation-delay: $introdelay;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms infinite;
animation-delay: $introdelay;
animation-duration: 2s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
50%{
-webkit-filter: blur(8px);
}
100%{
-webkit-filter: blur(0px);
}
}
JS:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500, "linear");
});
},2000);
})();
https://codepen.io/gamezordd/pen/oNGYQwp
I have a React application that holds just a simple static website. I have some CSS animations using keyframes which work as expected when testing it in the node development server using npm start but when I push the project to my live site using Firebase hosting, all animations stop working as expected. The fade-in-* classes no longer slowly fade in, the text just 'pops' into place with no gradual opacity change. Can anyone see why this might be?
I have added -moz- and -webkit- keyframes also. This seems to be the case on all browsers. Tested in Edge, Chromew and Firefox, all give the same result.
main.css
.font-big {
font-size: 1.2rem!important;
}
.font-small {
font-size: 0.8rem;
}
.text-black {
color: black;
}
.hidden {
display: none;
}
.footer {
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
.welcome-fade-in {
-moz-animation: fade-in-welcome 1s ease-in;
-webkit-animation: fade-in-welcome 1s ease-in;
animation: fade-in-welcome 1s ease-in;
}
.welcome-name-in {
-moz-animation: fade-in-welcome-name 2s ease-in;
-webkit-animation: fade-in-welcome-name 2s ease-in;
animation: fade-in-welcome-name 2s ease-in;
}
.welcome-text-in {
-moz-animation: fade-in-welcome-text 3s ease-in;
-webkit-animation: fade-in-welcome-text 3s ease-in;
animation: fade-in-welcome-text 3s ease-in;
}
.welcome-text-explore {
-moz-animation: fade-in-explore-text 4s ease-in;
-webkit-animation: fade-in-explore-text 4s ease-in;;
animation: fade-in-explore-text 4s ease-in;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: url("./bg.gif");
}
#keyframes fade-in-welcome {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#keyframes fade-in-welcome-name {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#keyframes fade-in-welcome-text {
0% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#keyframes fade-in-explore-text {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-moz-keyframes fade-in-welcome {
0% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-moz-keyframes fade-in-welcome-name {
0% {
-moz-opacity: 0;
}
50% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-moz-keyframes fade-in-welcome-text {
0% {
-moz-opacity: 0;
}
70% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-moz-keyframes fade-in-explore-text {
0% {
-moz-opacity: 0;
}
75% {
-moz-opacity: 0;
}
100% {
-moz-opacity: 100%;
}
}
#-webkit-keyframes fade-in-welcome {
0% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-webkit-keyframes fade-in-welcome-name {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-webkit-keyframes fade-in-welcome-text {
0% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
#-webkit-keyframes fade-in-explore-text {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 100%;
}
}
Landing.js
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import * as ROUTES from "../constants/routes";
class Landing extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container d-flex justify-content-center h-100">
<div className="row align-self-center">
<div className="col-12 text-center flex-wrap">
<h1 className="text-uppercase welcome-fade-in">Welcome to my website</h1>
<h2 className="welcome-name-in">My name is Adam Foot</h2>
<h3 className="welcome-text-in">A Front-End Developer from Stroud</h3>
<Link to={ROUTES.HOME} className="text-decoration-none text-black align-self-end"><h4 className="welcome-text-explore">Explore >>></h4></Link>
</div>
</div>
</div>
);
}
}
export default Landing;
I'm using this fun scrolling text effect on my 404 page, but I need the (short) text to stop and just remain visible once it reaches the top of the page instead of scrolling all the way up and away. How do I make that happen with just CSS? I'd like to use as little js as possible.
I butchered the codebase a bit, but basically you want to remove infinite iteration count from the slide animations and add in its place forward (which is a fill mode). Then you want to replace the top values in the animations with top: 0%. Lastly, you want to remove the black fade on #titles:after which can be done by either removing it entirely or lowering its opacity. Still needs work, but this is the general idea (going to have to run it in "Full page" mode):
#import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
* { padding: 0; margin: 0; }
body, html
{
width: 100%;
height: 100%;
font-family: "Droid Sans", arial, verdana, sans-serif;
font-weight: 700;
color: #ff6;
background-color: #000;
overflow: hidden;
}
p#start
{
position: relative;
width: 16em;
font-size: 200%;
font-weight: 400;
margin: 20% auto;
color: #4ee;
opacity: 0;
z-index: 1;
-webkit-animation: intro 2s ease-out;
-moz-animation: intro 2s ease-out;
-ms-animation: intro 2s ease-out;
-o-animation: intro 2s ease-out;
animation: intro 2s ease-out;
}
#-webkit-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-ms-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
h1
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 2.5s;
-moz-animation: logo 5s ease-out 2.5s;
-ms-animation: logo 5s ease-out 2.5s;
-o-animation: logo 5s ease-out 2.5s;
animation: logo 5s ease-out 2.5s;
}
h1 sub
{
display: block;
font-size: 0.3em;
letter-spacing: 0;
line-height: 0.8em;
}
#-webkit-keyframes logo {
0% { -webkit-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -webkit-transform: scale(0.1); opacity: 0; }
}
#-moz-keyframes logo {
0% { -moz-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -moz-transform: scale(0.1); opacity: 0; }
}
#-ms-keyframes logo {
0% { -ms-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -ms-transform: scale(0.1); opacity: 0; }
}
#-o-keyframes logo {
0% { -o-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -o-transform: scale(0.1); opacity: 0; }
}
#keyframes logo {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
/* the interesting 3D scrolling stuff */
#titles
{
position: absolute;
width: 18em;
height: 10em;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
text-align: justify;
overflow: hidden;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(25deg);
-moz-transform: perspective(300px) rotateX(25deg);
-ms-transform: perspective(300px) rotateX(25deg);
-o-transform: perspective(300px) rotateX(25deg);
transform: perspective(300px) rotateX(25deg);
}
#titles:after
{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,0.5) 0%, transparent 100%);
pointer-events: none;
}
#titles p
{
text-align: justify;
margin: 0.8em 0;
}
#titles p.center
{
text-align: center;
}
#titles a
{
color: #ff6;
text-decoration: underline;
}
#titlecontent
{
position: absolute;
top: 100%;
width: 100%;
-webkit-animation: scroll 10s linear 4s forwards;
-moz-animation: scroll 10s linear 4s forwards;
-ms-animation: scroll 10s linear 4s forwards;
-o-animation: scroll 10s linear 4s forwards;
animation: scroll 10s linear 4s forwards;
}
/* animation */
#-webkit-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-moz-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-ms-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#-o-keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
#keyframes scroll {
0% { top: 100%; }
100% { top: 0% }
}
<p id="start">A short time ago in a browser very, very close…</p>
<h1>STAR WARS<sub>titles in CSS3</sub></h1>
<div id="titles"><div id="titlecontent">
<p class="center">ERROR 404</p>
<p class="center">Page not found</p>
</div></div>
I'm trying to create a fullscreen slideshow:
http://codepen.io/jdvs1/pen/ZbpJvJ
There's a really long delay between the first slide and the second slide, about a second of a blank, black screen
I want the transition between images to be relatively quick, <1s, and not include a delayed view of a blank, black screen. How can I do this? I've been playing around with the keyframes for hours.
Here's the HTML:
<html>
<body>
<ul class="slideshow">
<li>
<h3>The Seasons</h3>
<!-- By Keven Law from Los Angeles, USA (Long Hot Summer......) [CC-BY-SA-2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AFlickr_-_law_keven_-_Long_Hot_Summer.......jpg -->
<span>Summer</span>
</li>
<li>
<!-- By http://www.ForestWander.com [CC-BY-SA-3.0-us (http://creativecommons.org/licenses/by-sa/3.0/us/deed.en)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3ARed-fall-tree-lake_-_West_Virginia_-_ForestWander.png -->
<span>Fall</span>
</li>
<li>
<!-- By Valerii Tkachenko [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3AWinter_wonderland_Austria_mountain_landscape_(8290712092).jpg -->
<span>Winter</span>
</li>
<li>
<!-- By Arman7 (Own work) [CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons, http://commons.wikimedia.org/wiki/File%3ABoroujerd_spring.jpg -->
<span>Spring</span>
</li>
</ul>
</body>
</html>
Here's the CSS:
html {
min-height: 100%;
}
body {
height: 100%;
background: black;
}
.slideshow {
list-style: none;
z-index: 1;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: imageAnimation 12s linear 0s infinite;
-moz-animation: imageAnimation 12s linear 0s infinite;
animation: imageAnimation 12s linear 0s infinite;
}
.slideshow li:nth-child(1) span {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/summer-slide.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/fall-slide.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/winter-slide.jpg);
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
animation-delay: 9s;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes titleAnimation {
0% {
opacity: 0;
}
12.5% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.no-cssanimations .slideshow li span {
opacity: 1;
}
Here i think i fixed it for you. there were some wonky css:
http://codepen.io/anon/pen/KdgvEq
I fixed this particularly:
#-webkit-keyframes imageAnimation {
1.6% {
opacity: 1;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
I have a div with a background image (an arrow). In the div is some text, the arrow is below it. I want the text inside the div to load with the page, but the background image load a few seconds later.
This is my code:
.homearrow {
background: url(http://www.stefaanoyen.be/wp-content/uploads/2013/03/arrow.png) no-repeat 200px 155px;
background-size: 125px 125px;
float: left;
-webkit-animation: fadein 4s; /* Safari and Chrome */
-moz-animation: fadein 4s; /* Firefox */
-ms-animation: fadein 4s; /* Internet Explorer */
-o-animation: fadein 4s; /* Opera */
animation: fadein 4s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
The problem: the whole div (text and background image) fades in. Is there a way to make the background image fade in, not the text?
Thank you,
Stefaan
Try the following
<html>
<head>
<style>
.wrapper {position: relative; margin: 15px 15px 15px 15px ;}
.homearrow {
background: #fff url('arrow.png') 0px 0px no-repeat ;
background-size: 125px 125px;
float: left;
-webkit-animation: fadein 4s; /* Safari and Chrome */
-moz-animation: fadein 4s; /* Firefox */
-ms-animation: fadein 4s; /* Internet Explorer */
-o-animation: fadein 4s; /* Opera */
animation: fadein 4s;
height: 125px;
width: 125px;
position: absolute; top: 0px; left: 0px;
}
.homearrowtext {position: absolute; top: 10px; left: 10px; }
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="wrapper">
<div class="homearrow"></div>
<p class="homearrowtext">Hello World</p>
</div>
</body>
I have put the text outside the div, applied position relative to the containing div and position absolute to the text. I have also given the image div some width and height.
Hope this helps.