I want my CSS div to be completely invisible when page opens but after 2s appear on screen.
I tried setting opacity: 0; and then transition: opacity 100 2s; but it didn't work. I don't want CTA for example for it to happen after they hover or something but instead I want it to happen even if the user doesn't move the mouse. Please help!
You can use CSS animation to make it. Like this-
HTML-
<div class="div"></div>
And CSS-
<style>
.div{
width:100px;
height:100px;
background:red;
animation-name:opacity;
animation-duration:4s;
}
#keyframes opacity{
0%{opacity:0;}
100%{opacity:1;}
}
</style>
U can simply use CSS animations instead of transition.
consider HTML code having single div element
<div id="main"></div>
now to apply CSS animation we do something like this,
#main{
...add your desired code for styling the div...
animation-name:onload;
animation-duration: 1s;
animation-delay: 2s; //this is the key line, what this means is the animation would start after 2s of delay.
}
// Now creating animation
#keyframes onload{
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
Related
Here is the image replacement code I am currently using in various parts of our website, to do a hover image replacement. My question is how to add an ease-in-out .5s to the existing code, or an alternative CSS code to our stylesheet for use throughout our website. I am looking to create a smoother transition between images. Thank you in advance for your help.
<img src="https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg"
onmouseover="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/Ginger-Hippo-Search-Services-1-1.jpg'"
onmouseout="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg'"
>
On our home page, you will see 7 different image hover replacement images, all with no transition timing. I've managed to create background transitions for what looks like buttons on our blog and industry articles pages, but can't replicate the process for our main page imagery.
Thank you again in advance for your help. I've been stuck on this for a couple of months.
Put the two images in an outer block element.
<section>
<img class="bottom" src="img.png">
<img class="animation" src="img-2.png">
</section>
The outer will be relative and the inner will be absolute.
section {
position: relative;
}
section img {
position: absolute;
}
Create the animation and apply it to the top element.
.animation {
animation-name: fade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
#keyframes fade {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Now if you want to edit the animation effect make changes in .animation.
Source: https://www.taniarascia.com/crossfade-between-two-images-with-css-animations/
You can also use this Example
var $this = $(this);
var newSource = $this.data("alt-src");
$this.data("alt-src", $this.attr("src"));
$this.attr("src", newSource);
};
$(function() {
$("img.demo-img").hover(sourceSwap, sourceSwap);
});
<img class="demo-img" data-alt-src="image-2.png" src="image-1.png" />
What i want to do is make my first line of text kind of zoom+fade in when the page is loaded, and my second line of text 2s after the page is loaded. I got the animations working and the timing using animation-delay, but i just can't figure out how to make the second line of text invisible until start of animation..
Here's a jsfiddle:
http://jsfiddle.net/L2wcxg2f/2/
This is my markup:
<center>
<h1><div id="line1">First</div><div id="line2">Second</div></h1>
</center>
And this is my css:
#line1 {animation: onload 2s;}
#line2 {animation: onload 2s; animation-delay: 2s;}
#keyframes onload {from{opacity: 0.0; font-size: 170px;}to{opacity: 1.0; font-size: 120px;}
Thanks in advance!
Give #line2 opacity:0 at the start and also animation-direction: forwards. Demo
Background:
Finding improved ways to use CSS, I came across the proposition of using image transitions for good effects.
After a few stumbles, I managed to do this with the help of some references to make a smooth transition in hover.
Now I want it automatic and with links in each picture, but I'm at a loss at the code.
Current JSFiddle:
None, JSFIDDLE doesn't accept IMG and I can't show there.
<div class="container">
<img src="sky.jpg">
<img class="front" src="bear.jpg">
</div>
.container
{
position:relative;
height:500px;
width:500px;
margin:0 auto;
}
.container img
{
position:absolute;
transition: opacity 1s ease-in-out;
}
.container img.front:hover
{
opacity:0;
}
Problem:
This HTML-CSS works but for a single image switch (2 images) on hover, not for multiple ones automatically.
Need:
A change in the code which allows multiple switches using CSS and HTML only, with different links on each image.
I know there are possibilities with JQUERY and JAVACRIPT, I wish for a solution without these two.
Solution Code restrictions and parameters:
No JQUERY nor JAVASCRIPT
Multiple browser compatibility (doesn't need to be very old ones)
Possibility of multiple links in each image switch
Many Thanks for all help provided.
Try this you have to move your cursor a slight (shake it a bit) to see the change in the link notice the change in the link http://jsfiddle.net/fc3nb5rL/1/
i used z-index instead of opacity
.back {
z-index:1;
}
#-webkit-keyframes anim {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.back:hover {
-webkit-animation:anim 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
#-webkit-keyframes anim2 {
from {
z-index:1;
}
to {
z-index:-2;
}
}
.front:hover{
-webkit-animation:anim2 5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function: ease-in-out;
}
This is my code:
http://jsfiddle.net/NVk2N/2/
I'm trying to fade the large background image in. I tried this:
#cover {
background: url(http://bootstrapguru.com/preview/cascade/images/carousel/imageOne.jpg) no-repeat center center fixed;
background-size: cover;
height:100%;
width: 100%;
position:fixed;
opacity:0;
transition: opacity 2s;
}
however the image never appears. What am I doing wrong?
James
You actually need an animation of the opacity, in which you set animation-fill-mode: forwards so the last frame continues to apply after the final iteration of the animation.
Updated fiddle: http://jsfiddle.net/NVk2N/7/
#cover {
...
-webkit-animation: 2s show;
-moz-animation: 2s show;
-ms-animation: 2s show;
animation: 2s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-moz-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#-ms-keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
#keyframes show {
from { opacity: 0 }
to { opacity: 1 }
}
(of course you need to use vendor prefixes where necessary)
Note: If you need to fade-in only the background image (and not the whole element) you could load the background inside an absolute positioned pseudoelement (e.g. #cover:before) with a negative z-index and just apply the animation to the psuedoelement itself:
Here's an example on codepen: http://codepen.io/anon/pen/EJayr/
Relevant CSS
#cover {
position: relative;
width : ...;
height : ...;
}
#cover:before {
content : "";
position: absolute;
z-index : -1;
top : 0;
left : 0;
width : 100%;
height : 100%;
background: url(...) top left no-repeat;
-webkit-animation: 5s show;
-moz-animation: 5s show;
-ms-animation: 5s show;
animation: 5s show;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
Animations on pseudoelements work fine on every modern browser (except in Chrome < 26 — as reported on issue #54699 — but not really a problem, since the current version at this moment is 34.0.1847.116)
you need to use some js code to trigger the animation property. just add a new class for #cover with opacity:1 and on body load assign this class to cover.
example
<body onload="document.getElementById('cover').classList.add('showed');">
To trigger a transition you actually need a trigger.
You are setting a opacity of "0" and this is what you get: 0 opacity.
The transition would work if the declaration of opacity would change from 0 to 1.
That is what transitions do.
The solution of Fabrizio Calderan with the Animation should do the job.
Working with the other answers that have been given will give you a fade on all the elements within that element so this will no achieve your desired result.
The best way to do this is to:
1) Create a div with a z-index of 1 which holds your background image and what you want to fade
2) Create another div with a z-index of 10 which holds your content which you dont want to fade and position it over the background div with position absolute.
3) Animate the background image with jquery animate
I hope this helps and that will give you your desired outcome!
I believe you may use keyframes and animations to get the job done.
It's not possible with purely css to fade only the background image. Reference: How to fade in background image by CSS3 Animation
The answer there explains that you may use <img> inside a <div> that you apply the fade animation on as there is no other way without anything but css.
I have an image on my website. When I hover over it I want it to do a 360 spin animation.
I'm currently doing so in CSS:-
.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
}
However, when the user hovers at the edge of the image, the image rotates and is no longer being hovered over at the edge causing the image to "spasm".
How can I achieve a proper looking and stable rotation? JavaScript would work too.
You can fix it by adding small delay to your transition
Working Demo
.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
transition-delay: 0.5s;
}
Update:
If you can use animation, You can do this
Updated Demo
.img-responsive {
animation: rotateme;
}
.img-responsive:hover {
animation: rotateme 5s;
}
You can make the image bigger when hovered, so that it's difficult that the user accidentally unhovers
if there is no padding or margin, set
.img-responsive:hover {
transition-duration: 2s;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
transform:rotate(360deg);
padding: 50px;
margin: -50px;
}
Increasing the padding to 50px makes sure that the mouse is still on it. Changing the margin in the same amount, but in opposite sense makes it stay at the same location.
fiddle