On a website, I was creating an object that that had a border animation on it. I had searched this question a lot of times on Stack Overflow and google, but no solution worked. My animation animated the border:
.object-color {
-webkit-animation: color 1.5s linear infinite alternate both;
animation: color 1.5s linear infinite alternate both;
}
#-webkit-keyframes color{
14.3% {
color: red;
background-color: #e0ffff !important;
padding-right: 5px !important;
border: 1px solid green !important;
}
28.6% {
color: green;
background-color: #e0ffff !important;
padding-right: 5px !important;
border: 1px solid red !important;
}
100% {
color: green;
background-color: #e0ffff !important;
padding-right: 5px !important;
border: 1px solid red !important;
}
}
However, when it was applied, the border didn't animate and had no color. Any help would be great, thanks!
The problem is with your use of !important inside of keyframes. Simply removing the !important declarations will cause your animation to work:
.object-color {
-webkit-animation: color 1.5s linear infinite alternate both;
animation: color 1.5s linear infinite alternate both;
}
#-webkit-keyframes color {
14.3% {
color: red;
background-color: #e0ffff;
padding-right: 5px;
border: 1px solid green;
}
28.6% {
color: green;
background-color: #e0ffff;
padding-right: 5px;
border: 1px solid red;
}
100% {
color: green;
background-color: #e0ffff;
padding-right: 5px;
border: 1px solid red;
}
}
<div class="object-color">Hi</div>
Hope this helps! :)
Related
I am trying to set an animation on some of my buttons by adding a dedicated class. I have created an animation, which works in Chrome, but not in Safari (I'm using SCSS, so it's automatically prefixed for me).
When I try other properties (such as rotate), the animation actually works, but not with "outline". I also have tried to "separate" the properties (instead of the shorthanded version), to no avail.
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
}
#keyframes showComparableData {
0% {
outline: none;
}
65% {
outline: 1px solid red;
outline-offset: 1px;
}
75% {
outline: 4px solid red;
outline-offset: 4px;
}
100% {
outline: 5px solid red;
outline-offset: 5px;
}
}
<button class="awesome comparable_data">Awesome</button>
<button class="awesome comparable_data">Awesome</button>
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
}
#keyframes showComparableData {
0% {
outline: none;
}
65% {
outline: 1px solid color(default);
outline-offset: 1px;
}
75% {
outline: 4px solid color(default);
outline-offset: 4px;
}
100% {
outline: 5px solid color(default);
outline-offset: 5px;
}
}
On Chrome, my button is "glowing" with the outline expanding back and forth from the button. On Safari, nothing is happening... and I cannot figure out why.
I was able to get it to work by specifying a starting state in the comparable_data class:
.comparable_data {
animation: showComparableData 1s linear infinite alternate;
outline: 2px solid red;
}
#keyframes showComparableData {
0% {
outline: 0px solid red;
outline-offset: 0px;
}
65% {
outline: 1px solid red;
outline-offset: 1px;
}
75% {
outline: 4px solid red;
outline-offset: 4px;
}
100% {
outline: 5px solid red;
outline-offset: 5px;
}
}
<button class="awesome comparable_data">Awesome</button>
You might need to edit the values or add some margin, since it clips out of view sometimes.
I also added an outline-offset to the first keyframe - it's not strictly necessary, as far as I know, but can be useful to see.
i need to create "pulse" animation of box shadow. I know trick with :after, but it not works with input because it's self closing element.
Here's example of my code. If possible I would like to solve it in css/less and try to not use js.
I forgot to add that i have some structure from package and I can't change it.
Structure is like
"form > div > input". And i need to add that animation if input is focused.
.elem {
border: 2px solid black;
width: 150px;
height: 50px;
margin: 30px;
line-heiht: 50px;
font-size: 42px;
}
#keyframes pulseGreenShadow {
from {
box-shadow: 3px 3px 5px green
}
to {
box-shadow: 1px 1px 0px green
}
}
.elem:focus {
animation: pulseGreenShadow 1s ease-in-out infinite alternate-reverse;
}
<input class="elem">
http://jsfiddle.net/SkylinR/cowzb1hg/227/
Than you in advance for any help
See if this is any better for you:
input {
border: 1px solid lightgray;
height: 40px;
padding: 0 10px;
width: 200px;
}
input:focus {
animation: glow 800ms ease-out infinite alternate;
outline: none;
}
#keyframes glow {
0% {
box-shadow: 0 0 5px rgba(0,255,0,.2);
}
100% {
box-shadow: 0 0 20px rgba(0,255,0,.8);
}
}
<input type="text">
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 1s;
}
#-webkit-keyframes {
0% {background-color:#4CAF50;}
25% {background-color: red;}
50% {background-color: yellow;}
75% {background-color: blue;}
100% {background-color: orange;}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>
I have started learning css3 animations. All the animations which i wanted to do seem to run fine except for the color change which i have put in 'keyframes'. The website from which I was learning animations showed the exact same way but it doesn't seem to work on my project. Any help would be highly appreciated. Thanks :-)
You have to give the animation a name..and then apply that animation as a property...
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button {
animation: color-change 12s ease infinite;
}
.button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
animation: color-change 12s ease infinite;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 1s;
}
#-webkit-keyframes color-change {
0% {
background-color: #4CAF50;
}
25% {
background-color: red;
}
50% {
background-color: yellow;
}
75% {
background-color: blue;
}
100% {
background-color: orange;
}
}
.button2:hover {
height: 250px;
min-width: 200px;
font-size: 75px;
font-family: american captain;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
transform: rotate(360deg);
}
<button class="button button2">Shadow on Hover</button>
For some reason, when I hover over the div, the border animates properly, but mousing off of it produces no transition. What am I missing?
http://codepen.io/anon/pen/XbPbvr
HTML:
<div class="test">
Test
</div>
LESS:
.test {
background: #eee;
border-bottom: none;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}
If you truly want no border, you can animate the color to transparent and the length to 0:
.test {
background: #eee;
border-bottom: 0px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
}
.test:hover {
border-bottom: 5px solid black;
}
<div class="test">
Test
</div>
You can't animate to border-bottom: none, change that to border-bottom: RGBA(0,0,0,0) (or perhaps border-bottom: transparent if that works).
You also don't need "transition: border 100ms ease-out" in the hover scope.
Border can't be none. Try this:
.test {
background: #eee;
border-bottom: 5px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}
I was just testing few CSS transitions( I am beginner in CSS ). All of the transitions are going smooth. But in one of the transition, when mouseover is done transition plays smoothly, and as soon as you do a mouse out it abruptly ends. In all other cases, mouseover and mouseout both are playing fine.
What is the reason why the transition is ending in such manner? How to fix it? ( Fixed: Thanks to #Edwin ). Now, please explain Why it is not working with no changes.
jsbin: http://jsbin.com/oposof , http://jsbin.com/oposof/5 ( I am concerned about the first transition 'Triangle' ).
#container1 > div.triangle {
border-bottom: 80px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
width: 0px;
height: 0px;
-webkit-transition: all 1.2s ease-in-out;
}
#container1 > div.triangle:hover {
border-top: 80px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
#container1 > div.triangle:active {
border-left: 80px solid blue;
border-right: 60px solid transparent;
}
#container2 > div.testt {
color: red;
-webkit-transition: all 1s ease-in-out;
}
#container2 > div.testt:hover {
color:yellow;
}
#container3 > div.circle {
border-radius: 70px;
width: 100px;
height: 100px;
background: red;
-webkit-border-radius: 50px;
-webkit-transition: all 1.2s ease-in-out;
}
#container3 > div.circle:hover {
-webkit-border-radius: 20px;
-webkit-transform: rotate(-45deg);
}
I have used -webkit- , so the above demo will work only on chrome and safari. Added -moz- Now, you can test it on Mozilla too ( hopefully in IE as well ). http://jsbin.com/oposof/5
It seems the abruptness is due to the fact that by default it does not have a border on top, then on hover it suddenly has border on top. So in mouseout, instead of transitioning, what its doing is hiding the top border because there was no initial value to reference for transition.
Try this:
#container1 > div.triangle {
border-bottom: 80px solid red;
border-top: 0 solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
width: 0px;
height: 0px;
-webkit-transition: all 1.2s ease-in-out;
}