I'd like to delay some clouds from starting on http://therealrohanm.me/Falcon-Hacks-Website/, neither animate delay nor transition delay seem to work. How would I accomplish this?
View the code here: https://github.com/Meeshbhoombah/meeshbhoombah.github.io
Check This Fiddle: http://jsfiddle.net/0cmonc5q/
#animated-cloud-background .cloud.cloud-1 {
top: 10%;
-webkit-animation: animateCloud 10s linear infinite;
-moz-animation: animateCloud 10s linear infinite;
animation: animateCloud 10s linear infinite;
-webkit-transform: scale(0.65);
-moz-transform: scale(0.65);
transform: scale(0.65);
z-index: -5;
animation-delay: 2s;
-webkit-animation-delay: 2s;
}
#animated-cloud-background .cloud {
position: absolute;
top: 0;
left: -128px;
}
The animation delay is working, but it needs to be placed after the animations for your style.. Problem with this is that it also delays the first frame, So it appears on the screen until the delay has happened. I've fixed this by giving the cloud elements a -left position.. in this case 128 the width of the image.
And this fiddle: http://jsfiddle.net/0cmonc5q/1/
Shows each image having a different delay (1 to 5 seconds), i've given them all the same animation time/rate so they all move but shows the delay in effect.
Related
I'm trying to get some text to slide from the left to the center of the webpage using HTML and CSS animations. The goal is to have the first block of text slide into the center first, then after a 2 second delay, have the second block of text slide into the center. So that there will be a nice effect of the reader watching lines as they are written on the page.
Here is the HTML code:
/* .slide1 {
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
} */
.slide2 {
/* animation-delay: 2s; */
margin-top : -20px;
-webkit-animation : slideIn 2s forwards;
-moz-animation : slideIn 2s forwards;
animation : slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#-moz-keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
#keyframes slideIn {
0% { transform: translateX(-900px); }
100% { transform: translateX(0); }
}
<h1 class="slide1">You want to go to the moon.<br></h1>
<h1 class="slide2">We’re here to give you a shot.</h1>
So the trouble is, the animation is working for the second line, but not for the first line when you uncomment the class slide1 above.
The entire thing moves together, which is not what is supposed to happen. The point of having a delay for the animation in slide2 is meant so that after the first block of text finishes moving into the center, then the second block of text will start to move right.
It's confusing why this isn't working -
if you have any solutions to this, please share them!
you must first position your .slide1 and .slide2 off-screen
transform : translateX(-100vw);
...and contrary to what you imagine, the css commands must also respect an order and your delay command must be placed second after the global command of your translate
⛐ 😵 very very bad :
animation-delay : 2s;
animation : 2s slideIn forwards;
( it make animation-delay : 0; )
😁 😁 good :
animation : 2s slideIn forwards;
animation-delay : 2s;
.
otherwise you must respect the correct ordering of the arguments
animation : 2s 2s slideIn forwards;
but in my opinion the best way to write this - without repeating css:
.slide {
text-align : center;
transform : translateX(-100vw);
animation : 2s slideIn forwards;
}
.second {
margin-top : -.8em;
animation-delay : 2s;
}
#keyframes slideIn {
0% { transform : translateX(-100vw); }
100% { transform : translateX(0); }
}
<h1 class="slide">You want to go to the moon.</h1>
<h1 class="slide second">We’re here to give you a shot.</h1>
also note the use of units, and the correct way to center your text whatever the width of the display (as you indicate in your question)
My css:
.App-logo {
animation: rotating infinite 10s linear;
height: 40vmin;
}
.App-logo:hover {
animation-timing-function: ease-out;
animation-iteration-count: 100;
animation-delay: 2s;
}
#keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
It should slow down on hover and get speed without hovering but what it does a little off i wanted it to do
I think the problem that i don't actually know how to save a state of the keyframe and apply it to another animation to ease out and then in, but this just an assumption.
You aren't able to save keyframe states using only CSS to transition between them, unfortunately. If you want to transition between them, you'd need to use something like Javascript to track states and manipulate data at any point in time.
So I currently have an image that is rotating 360degs in an infinite loop. It has 8 different products in the image and instead of linking the entire image itself to one page, I was wondering if there was a way I could image map each product separately while the image still rotates 360degs.
I'm currently using a simple CSS3 image rotate as seen below:
.animation
{
-webkit-animation:spin 18s linear infinite;
-moz-animation:spin 18s linear infinite;
animation:spin 18s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
Anyone ever seen this implemented before?
This is really tough problem. I would not personally use image maps in that case, but some clickable divs with opacity:0 on your image.
If you do so, you can rotate them with your image, but changing transform-origin property, so the point of rotation would be the same.
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.
How to prevent CSS3 transitions from reversing back?
For example: when i use
div
{
-webkit-transition:-webkit-transform 2s;
}
div:hover
{
-webkit-transform:rotate(360deg);
}
Whenever I move my mouse out it is rotating back,how to prevent it? SO that it only rotates forward when I place my mouse on the div and doesn't rotate back when my mouse leaves the div?
You have probably solved this already but in case you have not here is the solution to your particular problem of a 360 degree roll.
div
{
-webkit-transition: all 0.0s ;
-moz-transition: all 0.0s ;
-o-transition: all 0.0s ;
transition: all 0.0s;
}
div:hover
{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
You can use CSS animations instead and set the animation-fill-mode property to forwards which will persist the end state.
Here's a quick demo. As you can see it only rotates 360 degrees and then stops (Is this want you want?). If you want it to keep rotating as long as you have the mouse over the div, then you can change forwards to infinite and set the animation-timing-function to linear (to keep a consistent speed).
Like this:
animation: rotate 2s linear infinite;
But it won't look good when you hover out, since it breaks the animation & I don't think there is a fix for this. I hope this helped. If not, maybe a JavaScript solution, as mentioned in the other answer, would be better.
And here's the code from the demo.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background: #333;
}
.box:hover {
-webkit-animation: rotate 2s forwards;
animation: rotate 2s forwards;
}
#-webkit-keyframes rotate {
100% { -webkit-transform: rotate(360deg); }
}
#keyframes rotate {
100% { transform: rotate(360deg); }
}
Also with Javascript an CSS Animation will be reversing back (animated rotating backwards as many times as it has been turned forward before), if you for example have an image element rotated for a few times by clicking through a foto gallery and then try to close it using visibility:hidden;
The solution i found was to disable the CSS animation first, before changing the elements settings or hiding the element. This way it will not reverse:
document.getElementById("picture").style.transition = "none 0s linear";
That's how :hover works. It's only effective while your mouse is over the element. To do something more permanent, you would need JavaScript.