I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .
Related
I have a flash message div at the top of my page for when the site wants to display any messsages to the user.
I want the flash message to fade out after a couple of seconds. I'm using a CSS transition.
Here is my code:
.flash {
position: fixed;
opacity: 1;
visibility: visible;
transition: opacity 2s ease-in, visibility 2s ease-in;
}
.hide {
visibility: hidden;
opacity: 0;
}
document.querySelectorAll('.flash').forEach(function(flash){
flash.classList.toggle('hide');
})
I expect that when the page loads, the div will be visible before fading out. But, in Safari, when the page loads, .flash is invisible.
In Chrome, the page loads and the .flash div fades as expected. However, on reloading the page, the div still has the .hide class attached and so the flash message remains invisible. (I can store state in HTML?!!) Strangely, in Chrome, it works if I'm inspecting an element in the document with developer tools when I reload the page.
Now I'm highly confused.
Why does .hide remain attached to the div across page reloads?
Why does Safari fail to display the div at all?
EDIT: after your comment reply, what you need to do is trigger the fadeout on a focus event.
.flash:focus {
//use the fadeout code here
}
The reason is the toggle, your browser saves the state of the page in the browser's cache but not the javascript that is dynamically changing the css on reload, on and off.
Instead of manipulating the css with javascript, google fade out with css.
.fade-out {
animation: fadeOut ease 10s;
-webkit-animation: fadeOut ease 10s;
-moz-animation: fadeOut ease 10s;
-o-animation: fadeOut ease 10s;
-ms-animation: fadeOut ease 10s;
}
#keyframes fadeOut {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
it's a lot smoother this way, and you can test it more easily with the developer tools.
Im coding an interactive element that turns to look towards you when you click on it. I just have an onclick event that adds a class with the animation. Unfortunately, after playing the first time the animation does not reset. I found a question asking the same thing, but it was much too advanced for me and additionally used webkit which I dont want to use for this. Is there a simple way to reset the animation?
.susanb{
background-image:url('susanb.png');
background-size:contain;
width:18%;
height:45%;
background-repeat:no-repeat;
margin-top:12%;
margin-left: 60%;
position:absolute;
}
.susanbstare{
animation-name: stare;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#keyframes stare{
0%{background-image: url('susanbstarin.png')}
99%{background-image: url('susanbstarin.png')}
100%{background-image: url('susanb.png')}
}
<div class="susanb" id="susan"><div style="width:100%;height:100%;position:absolute;" onclick="stare();"></div>
<script>
function stare(){
document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");
}
</script>
</body>
.susanbstare {
animation: stare 2s infinite;
}
BTW in JS, this is better
document.getElementById("susan").classList.toggle("susanbstare");
instead of these 2 lines
document.getElementById("susan").removeAttribute("class");
document.getElementById("susan").setAttribute("class", "susanb susanbstare");
I would like to make some smooth transitions between pages navigation in Wicket Java framework. Is it possible with Wicket tools, javascript and css? I cant find a way to do that.
Thanks for any answer.
Wicket does not provide solutions for this. Most of the Wicket applications use either full page re-remder/redirect or Ajax for updating just part(s) of the page, but not the whole body.
I'd suggest you to try with CSS Keyframes. The idea is to add CSS class to the body of your pages on these two JS events: beforeunload and DOMContentLoaded (aka domready). When beforeunload is fired you need to remove fade-in and add fade-out CSS class. And do the opposite for DOMContentLoaded.
The CSS will look like:
/* make keyframes that tell the start state and the end state of our object */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
I am not very good in CSS so better ask Google for more info.
I've seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn't find it nor could I replicate it using CSS or jQuery, and here's where I thought some of you could help.
I've animated what I hope to achieve and I've embedded it below. I believe this can be coded using the new CSS3 key-frames or jQuery's .animate(); feature. I don't know. I've tried everything I know, but all in vain.
Here's the GIF animation of what I wanted:
I just noticed, http://droplr.com/ uses a very similar transition on their home page, but with a few sliding effects. And the data (words) that come up are all random, all the time. I'd like to know how that is possible!
DEMO
A possible solution with pure css!
#-webkit-keyframes fade-in{
from{
opacity:1;
top:0px;
}
to{
opacity:0;
top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;
}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}
.aggettivi{
display:inline;
width:100px;
height:100px;
}
I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD
I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution
Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation
div{
posititon: relative;
}
.js-nametag{
position: absolute;
}
.js-nametag:nth-child(1){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
.js-nametag:nth-child(2){
animation-name: fade;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-duration: 5s;
animation-direction: alternate;
}
#keyframes fade{
0%,50% {
opacity: 0;
}
100%{
opacity: 1;
}
}
<p class="js-nametag">Leandro de Lima</p>
<p class="js-nametag">Game Master</p>
https://codepen.io/theNewt/details/PdWeKX
Some extensive Google Searching and experimenting has led me to the point where I can answer my own question, and just in time too!
If any of you would like to know how that can be done, check out this CodePen snippet I wrote: http://codepen.io/AmruthPillai/pen/axvqB
Something like this:
JSFiddle Demo
HTML
<p>I am <span>Something</span><span class="hidden">Test22222</span></p>
CSS
.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}
jQuery
$(document).ready(function() {
// run the fade() function every 2 seconds
setInterval(function(){
fade();
},2000);
// toggle between fadeIn and fadeOut with 0.3s fade duration.
function fade(){
$("span").fadeToggle(300);
}
});
Note : this only works with toggling 2 words, it might be better to have an array of words, and to write a function to loop through those and apply the `fadeIn/fadeOut animation.
Edit : Here is a solution for multiple words - https://stackoverflow.com/a/2772278/2470724 it uses an array to store each word and then loops through them.
Edit 2 : Non-array solution : http://jsfiddle.net/kMBMp/ This version loops through an un-ordered list which has display:none on it
The lowest effort approach is probably to use the Morphext jQuery plug-in:
https://github.com/MrSaints/Morphext
It's powered by animate.css, so it's easy to change the animation style of the text.
If you're looking for something a bit more powerful (can specify in AND out animations; animate not just text), there's a spin-off called Morphist:
https://github.com/MrSaints/Morphist
Need to find a function in javascript flash, or css. that will alow me to rotate an image of a windmill at several different speeds. These speeds need to change with a real world wind speed.
You could easily accomplish this with CSS transitions. I'll give you a few tips to get you started.
Read this article. And here is a quick demo for you (webkit only).
Start out by defining you animation, call it spin, goes from 0 to 360 deg.:
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
Then, on the windmill image apply the animation, iteration, and timing function:
.windmill{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Then define your speeds (you will need to calculate these based on the image size, and wind speed formula):
.windmill.mph-0 { -webkit-animation-duration: 0s; }
.windmill.mph-10 { -webkit-animation-duration: 10s; }
.windmill.mph-20 { -webkit-animation-duration: 5s; }
Now you use javascript to apply the wind speed changes:
$('.windmill').addClass('mph-10'); // stats spinning at 10 mph