Hello I am having trouble combining both css transition and animations together. The animation is working but some reason when I add a transition, the transition works, but cancels out the animation. Anyone know how to combine them?
Here is my CSS:
.circle-spin {
transition: all 1s ease;
}
.circle-spin-reverse {
transition: all 1s ease;
}
.success li:hover .circle-spin-reverse {
animation:spin-reverse 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
.success li:hover .circle-spin {
animation:spin 10s linear infinite;
/* the above works until i add the transition below */
transform:scale(1.25);
}
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#keyframes spin-reverse { 100% { -webkit-transform: rotate(360deg); transform:rotate(-360deg); } }
Sorry I know it's alot of code, but thats the bare minimum code needed for this question.
Thanks
It’s cause your transform
/* in :hover */
transform:scale(1.25);
overrides transform in animaton
/* in animation */
transform:rotate(360deg);
You have to separate transforms to different elements. See my codepen.
Related
I want to have the beginning animation on load and then on :hover to add another animation. The problem is, after I leave the element(not hovering) it goes back to its first animation and repeats it.
Is there any way to avoid this from happening?
Problem video :
https://youtu.be/uCZdo4FsCj8
Code :
.char {
animation: slide-down 2s forwards cubic-bezier(0, 1.18, .82, 1.02);
animation-delay: calc(0s + (0.1s * var(--char-index)));
animation-iteration-count: 1;
opacity: 1;
#keyframes slide-down {
from {
transform: translate(-125%, 125%);
opacity: 1;
}
to {
transform: translate(0%);
opacity: 1;
}
}
&:hover {
animation: newAnim 0.4s forwards linear;
color: red;
#keyframes newAnim {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
}
}
You cannot do it without using JavaScript. When :hover happens, the animation-iteration-count gets reset. This in turn causes the first animation to repeat after letting go of hovering. So you will have to use some JavaScript to get it working.
Have you considered using the animation just for the initial movement, and transitions for the :hover effect? This way, the animation-iteration-count is not reset after unhovering. Essentially add the following css code:
.char {
...your animations for initial loading
transition: color 0.4s linear, transform 0.4s linear;
}
.char:hover {
transform: scale(1.2);
color: red;
}
An example of such solution can be found in this codepen.
I have an animation that has an infinite iterations count:
.spinner {
animation: spinnerAnimation 2s linear infinite;
}
What I want is to make the animation finish the current animation cycle and stop it on a button click (not really on a button click, but this is to make things easier to understand):
$("button").click(function() {
$(".spinner").addClass("stop");
})
This will add a stop class to the spinner:
.spinner.stop {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
It doesn't work really smooth, but I don't care about smoothness much in this case:
http://codepen.io/Deka87/pen/OXZvdm
The only problem is that this won't stop the animation in IE edge, i.e. things don't work in IE (versions that support animations). Any ideas?
PS: animation-play-state: pause; is not what I need, because this won't make the animation finish the current animation cycle, but pause it in its current position instead.
PSS: I am really looking for a CSS only solution, i.e. make it work inside .spinner.stop{}.
You had a problem with the name of your keyframe name - spinnerAnimation vs preloaderAnimation
The only way I was able to set IE to stop the animation was to set animation: none; inside the .stop class:
$("button").click(function() {
$(".spinner").addClass("stop");
})
.spinner {
width: 30px; height: 30px;
background: green;
animation: spinnerAnimation 2s linear infinite;
}
.spinner.stop {
-webkit-animation-iteration-count: 1;
animation: none;
}
button {
margin-top: 20px;
}
#-webkit-keyframes spinnerAnimation {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spinnerAnimation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner"></div>
<button>Stop spinner</button>
Goal:
Achieve animation that
apply initial style
on adding some class it plays forwards and keeps resulting styles
on removing trigger class it plays backwards and returns to initial state
What i got:
#keyframes translate {
0% {
transform: translate3d(-100%,0,0);
}
100% {
transform: translate3d(0,0,0);
}
}
.element {
animation-direction: reverse;
animation-duration: 0.35s;
animation-fill-mode: both;
animation-name: translate;
animation-play-state: running;
animation-timing-function: ease-in-out;
}
.element.is-animated {
animation-direction: normal;
}
Result:
It works as described above, (keeps style as required) except the lack of smooth animation. Just switches styles instantly. I guess there are some rules overlapping.
Does anybody made the same? I haven't find any proper tutorial for this particular issue
If you are going to switch between only this two transform properties. Use transition instead of animation.
.element {
transition:transform .2s ease;
width:30px;
height:30px;
border:1px solid red;
transform: translate3d(0,0,0);
}
.element.is-animated {
transform: translate3d(-100%,0,0);
}
Precisely you should add remove the class is-animated, whenever you want the transition to take place
On this page, I have a few of my elements under the video set to fade in after 15s with CSS.
The problem is that, until the elements fade in, the background below the video is Grey.
How can I change the GREY background to white (or #F3F8FC really) until my elements are finished fading? I can't seem to find the right CSS selector to change it. Here's the CSS I'm using - need to figure out how to change the color of what's behind the elements being hidden:
/* 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; } }
.enroll {
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;
}
.enroll {
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
animation-delay: 15s;
}
How to Change GREY to white
Cheers.
Javascript Solution
You can use javascript instead of CSS.
function fadeIn(){
//code to fadeIn...
}
And in HTML you add on element
<div id="bg" onload="setTimeout('fadeIn()', 15000)"></div>
CSS Solution
You can use background:(here goes attributes, for example color);.
Here's example:
background:white;
Try this:
#keyframes fadeIn { from { opacity:0;background:(color-1); } to { opacity:1;background:(color-2); } }
To remove the bg, you would do like this for the col-3cm layout for example:
.col-3cm .main,
.col-3cm .main-inner
{
background: none;
}
I'm working on my first CSS keyframe animation and would like to know how it would be possible to pause an animation after it finishes its first run-through. You can check out my site here: http://www.tommaxwell.me and the grey quote at the bottom has a hover animation that you can see. However, once the animation is over it resets. How should I go about stopping it so that it stays in the end state of the animation when it's finished?
I know the use of a keyframe animation in this case is kind of lame and unnecessary, but I'm really just testing out keyframes, and will use it better later. :)
As #Mr. Alien answered, transitions is to prefer for this, but since you asked - it is possible to maintain the last state in an animation.
You do this by adding animation-fill-mode: forwards;
Here's a demo
Here's the code from my example:
HTML
<div class="text">Hover here</div>
CSS
.text {
color: blue;
}
.text:hover {
-webkit-animation: color 1.0s ease-in forwards;
-moz-animation: color 1.0s ease-in forwards;
-o-animation: color 1.0s ease-in forwards;
animation: color 1.0s ease-in forwards;
}
#-webkit-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-moz-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-o-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#keyframes color {
0% { color: blue; }
100% { color: red; }
}
Here's a good resource if you want to read about the the ‘animation-fill-mode’ property.
http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property
I know what you are doing here, use CSS transition instead
Demo
.class {
color: #ff0000;
transition: color 2s;
-moz-transition: color 2s; /* Firefox 4 */
-webkit-transition: color 2s; /* Safari and Chrome */
-o-transition: color 2s; /* Opera */
}
.class:hover {
color: #00ff00;
}
You wont be able to preserve the hovered state of your text, for that you need to use JavaScript