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
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>
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
animation can do it ，just：
-webkit-animation-fill-mode: forwards;
but the ‘transition’ ， what can I do let div 'end' in hover state use 'transition'
.div-box{
position: relative;
top:0;
left: 0;
width: 100px;
height: 100px;
background: red;
transition:all 1s linear ;
}
.div-box:hover{
transform: translate(100px,0);
}
You can kind of emulate the behavior you need with the following trick:
.div-box{
position: relative;
top:0;
left: 0;
width: 100px;
height: 100px;
background: red;
transition:all 1s linear 99999s; /* huge delay for non-hovered state! */
}
.div-box:hover{
transform: translate(100px,0);
transition:all 1s linear; /* immediate transition start on hover */
}
Yes, you can do something close to what you are wanting with pure CSS. Add the following to your CSS, it'll run the animation as long as they are hovering over the object, and it will stop once the animation is complete.
.div-box {
-webkit-animation-fill-mode: forwards;
animation-play-state: paused;
}
.div-box:hover {
animation-play-state: running;
}
I am working on a project that calls for multiple animated, moving icons that will stop, expand, and move to position on mouseover. Is there a pure CSS way to get an element to seamlessly start from whatever (mid-animation) position they are at when the hover event begins and transition to the new final keyframe properties, rather than starting from a set initial state?
#keyframes drop {
from {top:-100px;}
to {top:100px;}
}
#keyframes freeze {
to {left:10px; width:700px;}
}
.droptext {
position:absolute;
width: 100px;
height: 100px;
background-color: red;
animation: drop 2s linear infinite;
-webkit-animation: drop 2s linear infinite;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.droptext:hover {
z-index:99;
-webkit-animation: freeze 2s linear 1s forwards;
-webkit-transition: top:10px;
}
Try this
.droptext:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
You can use animation-play-state: paused to pause the animation and expand the text on :hover with transition. Example:
#keyframes drop {
0% {
top: 0;
left: 0;
}
50% {
top: 200px;
left: 300px;
}
100% {
top: 0;
left: 0;
}
}
.text {
width: 100px;
height: 20px;
position: relative;
padding: 20px;
border: 1px solid #ddd;
left: 0;
overflow: hidden;
white-space: nowrap;
transition: all .5s ease-in-out;
animation: drop 10s linear infinite;
}
.text:hover {
width: 400px;
height: 60px;
animation-play-state: paused;
transform: translate(-20px, 20px);
}
<div class="text">Lorem ipsum dolor sit amet blah blah</div>
I was just trying to create a simple border animation in CSS-3 , but somehow it seems to fail and not work FIDDLE HERE
CODE:
a {
display: inline-block;
margin-top: 4em;
padding: 2em 5em;
background: #eee;
color: #000;
position: relative;
/*width: 120%;*/
}
a:before {
content:'';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 5px;
display: block;
background: #c107b4;
}
a:hover:before {
-webkit-animation-delay: .3s;
-o-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-name: borderanim;
-o-animation-name: borderanim;
animation-name: borderanim;
}
#-moz-keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
#keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
Well if instead of using a custom animation, if i do the following :
a:hover:before {
width: 100%;
left: 0;
right: 0;
-webkit-transition: width 5s;
-o-transition: width 5s;
transition: width 5s;
}
The border animation works(no keyframes used here though.), it works , but there is glinch. I'd prefer a keyframe animation. Can anybody tell me what am i doing wrong ?
Thank you.
Alex-z.
Must assign animation duration to see the change
in your case it animation in 0.0s. Must assign some time to see animation e.g
tag-name
{
animation-name:animate;
animation-duration:2s;
}
#keyframes animate
{
from{background:black;}
to{background:white;}
}
you can use -webkit-animation instead of -webkit-animation-name and give some animation duration.
DEMO
a:hover:before {
-webkit-animation: borderanim 5s;
-o-animation: borderanim 5s;
animation: borderanim 5s; }