Here's what I would like to do:
It's a quiz, there's a question and several answers.
The user picks 1 answer and is then shown what the correct answer is.
I would like that the correct answer button "lights up" basically, and then fades back to normal.
So I can give my element a simple style and then add a class with a white box shadow.
And I can transition between the two.
But I'd like to add the class, and then the element gets the full white box shadow, which then fades back to the normal state.
Is that possible?
You need to use #keyframes to do it in pure CSS3
#keyframes animation_name{
0% {background: color1;}
50% {background: color2;}
100% {background: color1;}
}
and for the element where you want the animation
css_selector{
animation: animation_name 5s;
animation-iteration-count:infinite;
}
and dont forget to add browser specific -moz, -webkit prefix.
Check out this Example on w3schools on CSS3 Animation
javascript apply class to element (no jquery):
document.getElementById("id").className = "newclass";
Here is a jsfiddle for you. Should do what you need - just click the black rectangle.
Related
I would like to animate a Divi Divider. (Divi is a Builder and theme for WordPress)
So in the default CSS you find this class:
.et_pb_bottom_inside_divider{
background-size:100% 110px;
bottom:0;height:110px;
}
110px is the value, that need to be faded. When I set it to 200 it has the hight, so I am sure it is the correct class.
So what I did is I wrote some CSS and added it to the CSS of the WordPress. First you the class with adding the new animation name and details. 2nd the animation itself.
Problem: Nothing happens. When I the new height to the first class, it gets the height. So also working in general.
.et_pb_bottom_inside_divider {
animation-name: xcxcxcxc;
animation-duration: 3s;
animation-iteration-count: 3;
}
#keyframes xcxcxcxc {
0% {background-size:100% 110px!important; height:110px!important;}
100% {background-size:100% 210px!important; height:210px!important;}
}
If you have an idea let me know.
Regards C
PS: I know there are some tuts how to animate the Divi divider over the backend, but only over scroll efffect. I would need to have it animated when loaded etc.
Here a picture for better understanding. So now with 110px the optical divider is till the red arrow. With the animation I would like it to go up to something like the yellow arrow. (210px)
I got the solution.
Everything was right except the important. When removed, it worked :)
I have been playing around with transitions and animations, and I wanted to make the most of using hover with them.
I was wondering if it is possible to make animation happen after being hovered over, not necessarily while hovering over it. For example, if I wanted a picture to slide in and change opacity after the related paragraph is hovered, how would I get it to stay without keeping the mouse of the section?
My last question is if something similar to keyframes can be used with transitions. I prefer transitions because they transition back to the original state instead of snapping back.
I made a jsfiddle with some basic code examples, and I am wondering how to expand upon them. Hopefully the examples help clarify what I am trying to explain.
jsfiddle
Says I need code to link jsfiddle
They are very simple, the first is just an animation (left to right) that I want to remain after hovering once.
The second is a transition (left to right), and I am wondering if I can make an animation similar to the animation that follows it (left to right to left)
I update the fiddle here
However, "left to right to left" can not accomplish through transition.
Because transition only has start status and end status, it can not handle the middle status.
Look here. https://developer.mozilla.org/en-US/docs/Web/CSS/transition
You can accomplish "left to right to left" through keyframes. For example.
#keyframes slideRight {
0% {
margin-left: 0em;
}
50% {
margin-left: 2em;
}
100% {
margin-left: 0em
}
}
I am currently trying to adjust the CSS Animation I have testing on https://www.alexcurriemedia.com/css-test/
What I need to happen is for the first image to not be on screen when the page opens, and for the last image to disappear completely off screen
Here is the html code:
<table><td><h1 class="animated slideInLeft">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="500" width="500"/>
</h1></td>
<td><h1 class="animated slideOutRight">
<img src="https://www.alexcurriemedia.com/wp-content/uploads/2015/12/18.jpg" height="100" width="500"/>
</h1></td></table>
And this link is the stylesheet for the movements:
So on load you want the image on the right to start sliding off the page, and the image on the left to start sliding in?
Your images are staying visible after they slide over because, by default, content that overflow's it's parent stays visible. Try adding overflow: hidden to .content-wrapper.
Otherwise I've misunderstood the question.
The problem is in your js fiddle, you cannot transition visibilty in keyframes, it is either visible or not visible, so theres no mid-points to 'transition' you can how-ever transition opacity or use javascript to toggle display:block; to display:none; or combine the two methods to fade out its visiblity and then remove it from the dom using js.
Also your keyframe statements should both match:
ie from: should have all the same properties & values
as 'to'.
examples:
#keyframes name{
from{filter:opacity(0) hue-rotate(0deg);}
to{filter:opacity(1) hue-rotate(288deg);}
}
#keyframes sumName{
0%{filter:opacity(0) hue-rotate(0deg);} // Note even though hue-rotate is at 0deg, it will not run if they do not match
50%{filter:opacity(0.5) hue-rotate(288deg);}
100%{filter:opacity(1) hue-rotate(24degdeg);}
}
Also:
These`should be above the keyframe declarations, symantically speaking.
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
hope some of these help.
I have a loading indicator (a bar that continuously animates its width from 0% to 100%) using css3 keyframes. I trigger this behavior by adding a .loading class to by loading bar. Now once I am done loading I would like to animate out of the keyframes. Say, for example at the time that I finish loading the width is animated to 50% I would not have it jump to 100%, but ease it to 100% where it should stay.
I have tried adding a transition and animation to my loading bar class, but neither seems to be working. How do I go about this?
Here's the jsFiddle.
You can use the animationiteration (MDN) event to detect when the animation reaches the end of a loop and then remove the class.
$('#bar').on('webkitAnimationIteration', function(e){
$('#bar').removeClass('loading').off('webkitAnimationIteration');
});
I've updated the fiddle here: http://jsfiddle.net/jedidiah/kYnhF/6/
-
For simplicity I've only added the webkit prefix to the the fiddle but there is a useful article about css animation events in javascript here http://www.sitepoint.com/css3-animation-javascript-event-handlers/ where they share a little function to simplify using the prefixes you could use to support other browsers.
I upvoted #Jedidiah answer, I think that is what you need.
BTW, If you are interested in an alternative, simple CSS3 solution, then add to your #bar:
transition: all 1s;
-webkit-transition: all 1s
Running Demo
Potential drawbacks (depending on your needs):
It won't respect the previous speed of the progressbar (no matter if you are at 10% or 90%, the remaining part will take 1 second to complete... but this is how often the progressbars of the installers work, so it may not be a problem);
It won't run all the animation: if you are in the first half, it will fill to the left, instead of completing all the round.
I'm trying to get my head wrapped around CSS3 transitions, and I'm not sure if there is something wrong with my understanding, or if the browsers aren't cooperating.
First of all, I thought Opera was supposed to have support for transitions, since version 10 or so, but neither transition nor -o-transition seems to do anything in 11.62. Or does Opera use a different syntax?
Anyway, I can make a background color fade in and out on hovering with most other browsers by writing
div {transition:background 2s;}
div:hover {background:lime}
OK so far, and I can also make it so that the background fades in, but not out, by writing
div:hover {transition:background 2s; background:lime}
and that the background fades out, but not in, like so:
div {transition:background 2s;}
div:hover {transition:background 0s; background:lime}
But I don't understand why that happens. According to the docs, a transition with a 0s duration isn't supposed to have any effect, so why does the last one have a different result?
jsFiddle
I assume what you are looking for is the ease timing function.
So your CSS rule should look something like this.
.class {
transition: property(ies) duration timing-function;
}
.class:hover {
property(ies): new value;
}
For Opera you have to define the exact property. In your case it wouldn't be the background property but the background-color property.
From your example it looks like it's behaving as I'd expect it.
The transitions run from one state to another.
I'll try an explain this as best I can.
On the last one you have a trasition of 2s on the <div> in its normal state and a a transition of 0s on the <div> in it's hover state.
So what is happening?
When you hover on the <div>, the state changes to :hover and so the transition for div:hover is run. You have a trasition of 0s so no animation is run.
When you remove the mouse from the <div> the state changes from :hover back to normal, and so the transition for div in its normal state is run. You have this at 2s.
Does this explain what is happening and how the transitions work?