im trying to apply 2 animations to my object. I tried to add one of my animations to div and another one to my div's child box. Box's animation works well but whenever i tried to add one more animation to my box its not working so i tried to add my other animation to div. But it didn't work too. Here is my code:
<style>
div{
animation-name: dropMove;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#box{
color: red;
margin: auto;
width: 100px;
height: 100px;
border: 25px solid;
border-radius: 100%;
animation-name: colorChanger;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes colorChanger {
0%{
color: red;
}
33.3%{
color: blue;
}
66.3%{
color: green;
}
99.3%{
color: red;
}
}
#keyframes dropMove {
50%{
top:100px;
}
100%{
top: 1px;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
my colorChanger animation works fine but dropMove does not work.
Thanks in advance :)
Related
I built a css animation and part of it is changing the border color of a div.
I'm using from and to values. The border should blink white and blue but instead of white I get a light blue.
I built a minimal snippet to demonstrate this. Any idea what I'm doing wrong?
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
-webkit-animation: switch-animation 2s steps(2, start) infinite;
animation: switch-animation 2s steps(2, start) infinite;
}
#keyframes switch-animation {
from {
border-color: white;
}
to {
border-color: blue;
}
}
#-webkit-keyframes switch-animation {
from {
border-color: white;
}
to {
border-color: blue;
}
}
<html>
<head></head>
<body>
<div class="switch"></div>
</body>
</html>
According to the documenation steps(2,start) will give this timing output:
So you will spend 0 time on the first state, half the time on the 50% (light blue) and half the time on the 100% (blue). You will have a similar logic using end instead of start where you will spend 0 time on the last state. Actually what you are looking for is the frames function but it's actually under draft and using frames(2) you will do exactly what you want:
An easy fix is to change the values of the keyframes to force each color to stay half the animation without using steps
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
animation: switch-animation 2s infinite linear;
}
#keyframes switch-animation {
0%,50% {
border-color: white;
}
50.1%,100% {
border-color: blue;
}
}
<div class="switch"></div>
This should work.
.switch {
width: 100px;
height: 100px;
border: 5px solid white;
-webkit-animation: switch-animation 2s steps(1, start) infinite;
animation: switch-animation 2s steps(1, start) infinite;
}
#keyframes switch-animation {
0%,100% {
border-color: white;
}
50% {
border-color: blue;
}
}
#-webkit-keyframes switch-animation {
0%,100%{
border-color: white;
}
50% {
border-color: blue;
}
}
<html>
<head></head>
<body>
<div class="switch"></div>
</body>
</html>
I'm trying to make this div move smoothly while changing colors, but the problem is that right before it should transition into the #bad455 color, it stops briefly.
So I was wondering are there any ways to make it go smoothly without no stopping?
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 20px;
}
100% {
background-color: #bad455;
margin-top: 30px;
}
}
<div></div>
You set the iteration count to infinite so your animation keeps going and set the margin of your last keyframe back to 0 so it returns to it's default state.
div {
background-color: black;
width: 300px;
height: 300px;
margin: 0 auto;
}
div:hover {
animation-name: anim1;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes anim1 {
0% {
background-color: pink;
margin-top: 10px;
}
50% {
background-color: yellow;
margin-top: 30px;
}
100% {
background-color: #bad455;
margin-top: 0px;
}
}
<div></div>
Try this in your div tag:
-webkit-transition: width 2s;
transition: width 2s;
This question already has answers here:
What is the opposite of :hover (on mouse leave)?
(13 answers)
Closed 5 years ago.
Im trying to animate a round border, that becomes square when you hover, and goes back to a circle after you unhover. Despite my best efforts, i can't seem to make it work. Here is what i have so far.
#keyframes mymove {
from {
border-radius: 100% 100%;
}
to {
border-radius: 0px, 0px;
}
}
#keyframes mymoveback {
from {
border-radius: 0px 0px;
}
to {
border-radius: 100%, 100%;
}
}
.testButt {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation: mymoveback 3s;
animation-fill-mode: forwards;
}
.testButt:hover {
-webkit-animation-fill-mode: forwards;
animation: mymove 2s;
animation-fill-mode: forwards;
}
<br><br><br>
<div class="testButt">
<br><br> Log In
</div>
You over complicate it, simply use transition like this:
.testButt {
width: 100px;
height: 100px;
padding:40px 0;
text-align:center;
box-sizing:border-box;
background: red;
position: relative;
border-radius: 50%;
transition: 0.5s;
}
.testButt:hover {
border-radius: 0%;
}
<div class="testButt">
Log In
</div>
Something like this:
HTML:
<button>Hover Me!</button>
And CSS:
button {
display: block;
width: 60px;
height: 60px;
text-decoration: none;
padding: 5px;
border: 1px solid red;
border-radius: 30px;
transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
}
button:hover {
border-radius: 0;
}
And link to fiddle:
Hover and round animation
I am trying to slide div in after 1 second and slide it out after 4 seconds exactly the same way. is it possible?
The second problem is, that the black div(second div), disappears after the animation.
.first {
width: 100px;
height: 100px;
background: red;
animation-name: example;
animation-duration: 2s;
}
.second {
width: 0;
height: 100px;
background: black;
margin-top: -100px;
margin-left: 100px;
animation-name: example2;
animation-delay: 2s;
animation-duration: 2s;
}
#keyframes example {
from {
margin-left: -200px
}
to {
margin-left: 0px
}
}
#keyframes example2 {
from {
width: 0px
}
to {
width: 250px
}
}
<div class="first"></div>
<div class="second"></div>
JSFiddle
if you use percentages you can do what you want.
You can define your animation just as you like.
#keyframes example {
0%, 100% {
margin-left: -200px
}
10%, 90% {
margin-left: 0px
}
}
set the animation delay to 1s.
you need to experiment with the percentages for your need
The second div is going to its original state after the animation.
This will set the css stile after the animation is over
animation-fill-mode: forwards;
I am expecting the following code to animate button on hover.
But this is not working properly -
#button3 {
float: left;
height: 200px;
width: 200px;
}
#button3:hover {
animation: 3s stilius forwards;
-webkit-transition: 3s stilius forwards;}
#keyframes stilius {
100% {border-style: dashed;}}
You need to define an initial state for the border otherwise it won't know how to transition.
For example:
#button3 {
border-style:solid;
border-width: 5px;
border-color:#000;
float: left;
height: 200px;
width: 200px;
}
#button3:hover {
animation: 3s stilius forwards;
-webkit-transition: 3s stilius forwards;
}
#keyframes stilius {
100% {
border-color: #fff;
border-style: dashed;
}
}
Did you add the border property?
You have to add the border property first to animate it
eg:border:5px solid;
If thats not the problem, If you are using browser like mozilla etc use the -moz- and -o- prefixes as well