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.
Related
h1.entry-title {
z-index: 9999;
color: #F23400;
font-family: 'Roboto', sans-serif;
font-size: 44px;
font-weight: 800;
font-style: italic;
text-align: center;
line-height: 15;
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */ #-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
z-index: 9999;
}
This is what i have tried with no luck. I am sorry if this was answered before. I have set the background image to -1 that is on this page, and the title to 9999 with z-index. I am using elementor pro to do such editing on that image.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have some text that I rotate and fade in. My problem is the text has no colour, and I would like to make it blue.
As you can see, I do assign a color attribute to the rubber class, but it does not seem to be taking effect.
Please can anyone advise how I can change my css to achieve this? Thank you
.rubber {
padding: 5px 2px;
color: blue;
font-family: 'Black Ops One', cursive;
text-transform: uppercase;
text-align: center;
width: 155px;
transform: rotate(-10deg);
}
// fade-in
.fade-in p {
margin-top: 25px;
text-align: center;
animation: fadein 8s;
-moz-animation: fadein 8s;
/* Firefox */
-webkit-animation: fadein 8s;
/* Safari and Chrome */
-o-animation: fadein 8s;
/* Opera */
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
#-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
#-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
#-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 0.8;
}
}
<div class="rubber fade-in">
<p>Job Offered</p>
</div>
Please replace // fade-in with /* fade-in */ . In css
to add comment line you should use /* comment here */
Here is the working code
.rubber {
padding: 5px 2px;
color: blue;
font-family: 'Black Ops One', cursive;
text-transform: uppercase;
text-align: center;
width: 155px;
transform: rotate(-10deg);
}
/* fade in */
.fade-in p{
margin-top: 25px;
text-align: center;
animation: fadein 8s;
-moz-animation: fadein 8s; /* Firefox */
-webkit-animation: fadein 8s; /* Safari and Chrome */
-o-animation: fadein 8s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:0.8;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:0.8;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:0.8;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity:0.8;
}
}
<div class="rubber fade-in"><p>Job Offered</p></div>
I tried your code in jsfiddle as well as it normal HTML page.
Only problem was with the comment in css style tag use this format
/ Shift+8 comment Shift+8/
My DIV with a class is hidden until the browser size is 1,000px width.
How do I make a the DIV fade in once the browser size makes it appear using CSS?
Here is my current code. It does not work.
Thank you for any help.
.instaWRAP {
display: none;
opacity:0;
transition:opacity 5s linear;*
}
#media only screen and (max-width: 1000px) {
.instaWRAP {display: inline}
}
Use this code in your media query:
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
My CSS is:
.fade-in-repeat {
-webkit-animation: fadein 2s; /* Safari and Chrome */
-moz-animation: fadein 2s; /* Firefox */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera */
animation: fadein 2s;
}
#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; }
}
My HTML is:
<tr class="fade-in-repeat" ng-repeat="transaction in transactions | orderBy:transaction.time">
<td>
<div class="row">
<div class="col-lg-6">
So as items are added, I want them to fade in. The problem is there is a FUOC before the animation kicks in, which makes it look like it's flickering
Just add opacity:0 to .fade-in-repeat's CSS
Demo
is it possible to use css keyframes animation to pseudo-element such as 'before' and 'after'?
I am developing webservice for smartphone, and want to blink element. but do not want to blink element itself.
so, ways I came up with are two;
one is to cover element with another element, and blink that element;
and another is to use pseudo-element, but it seems not working.
css:
.fadeElement {
background-color: #000000;
width: 60px;
height: 60px;
}
.fadeElement:after {
display: block;
content: '';
position: relative;
height: 100%;
width: 100%;
z-index: 500;
background-color: rgba(249, 4, 0, 0.5);
animation-name: 'fade';
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: 'fade';
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
html:
<div class="fadeElement"></div>
Firefox, Chrome, and IE10+ support this.
See more info at Chris Coyier's site: http://css-tricks.com/transitions-and-animations-on-css-generated-content/