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");
Related
At the top of my page, I want to have some text scroll from left to right, as an announcement. I've heard about CSS animations before, but I don't know how to make one. So far, this is what I have.
p {
position: relative;
animation-name: example;
animation-duration: 13s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {left:-200px; top:0px;}
50% {left:700px; top:0px;}
}
<p>This is an announcement</p>
I am wondering if there is an easier way to make the scrolling animation. I don't know JavaScript, but is there a way to make this animation in JavaScript or just in CSS?
You can use translateX with the transform property.
p {
animation: example linear 5s infinite;
}
#keyframes example {
from {
transform: translateX(-40%);
}
to {
transform: translateX(100%);
}
}
<p>This is an announcement</p>
So currently, your animation kind of restarts every 13 seconds and pauses and then starts over again. In your animation, the text movement is not consistent, it starts to move fast and when it ends, it gets slower.
A solution is to use the <marquee> tag. This tag is especially made for scrolling text!
For example, this code will automatically do whatever your code does, but better and less lines of code:
<!DOCTYPE html>
<html>
<body>
<marquee direction="right" >This is a paragraph.</marquee>
</body>
</html>
There are also a lot of attributes that you can change, including the direction, speed, height, loop, width, etc. You can change these attributes to your liking to make the scrolling text better.
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% .
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
I just implemented CSS animation on a page like this:
#-webkit-keyframes backdrop-roll{
to { background-position-x:100%; }
}
body
{
background-image:url('http://www.wallmay.net/thumbnails/detail/20120331/pokemon%20fields%20ruby%201920x1200%20wallpaper_www.wallmay.com_2.jpg');
background-size: 800px 650px;
-webkit-animation: backdrop-roll 8s linear infinite;
-webkit-animation-direction:normal
}
There's a button that changes the background and I want that image to stay still so I tried this via Jquery:
$('body').css('-webkit-animation-play-state','paused');
That was what came to mind, but for some reason it instead stops everything from working. This is new to me so I'm not sure what to even look up(I find how to stop it with css not a jquery event).
I would place the animation play state properties into their own classes like this:
.play{
-webkit-animation-play-state: running;
}
.pause{
-webkit-animation-play-state: paused;
}
Then you can use jQuery to control the animation:
$(document).ready(function(){
$('body').addClass('play');
$('#pause').click(function(){
if($('body').hasClass('play')){
$('body').removeClass('play');
}
});
$('#resume').click(function(){
if(!$('body').hasClass('play')){
$('body').addClass('play');
}
});
});
Here's an example: http://jsfiddle.net/F2nQM/
I am using Animate.CSS and I am using the "hinge" effect to have an image fall off the screen. Works great in real browsers but of course not in IE 9 or below. Is there a way to make this effect work with jQuery or javascript? Or will I have to add a jQuery transition to fade the image out?
Thanks!
Code:
HTML
<img id="animate" class="fear" src="/2012/images/september/fear-sign.png" />
CSS
.fear{
position:absolute;
left:150px;
top:0px;
}
#animate {
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
JS
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('#animate').addClass('animated hinge');
});
Here is a fiddle I created showing the animation effect.
While not as smooth as the Animate.CSS Hinge effect I ended up using jQuery to make the image fall off the screen (well fall and fade out.)
I had help from CoreyRS and his answer and method can be found here.