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;
}
}
Related
I am trying to create a transition for an "a" tag using the below code (written in SASS), however, the transition doesn't seem to apply. On hover, it immediately adds the bottom border and when removing the cursor, there is a second delay before removing the border without a transition.
a {
position: absolute;
top: 1em;
left: 1em;
color: white;
font-weight: 500;
display: flex;
align-items: center;
text-decoration: none;
border-bottom: white 0px solid;
transition: all 2s ease-in-out;
&:hover {
border-bottom: white 1px solid;
}
}
Any help would be much appreciated.
The transition from 0px to 1px is just one step. If you want to let the border appear try to use the opacity of the border. Like:
border-bottom: rgba(255,255, 255,0) 1px solid;
and on hover:
border-bottom: rgba(255,255,255,1) 1px solid;
a {
position: absolute;
top: 1em;
left: 1em;
color: red;
font-weight: 500;
display: flex;
align-items: center;
text-decoration: none;
border-bottom: rgba(255,0,0,0) 1px solid;
transition: all 2s ease-in-out;
}
a:hover {
border-bottom: rgba(255,0,0,1) 1px solid;
}
A Link
i got a problem in css . So when i remove the color from input , outline works as it has to , but when i add color:white at first it shows default outline with color white , and only then the written outline works
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
<input type="text" name="" id="" placeholder="Nickname..." />
check this out http://test-znaniya.ga
This happens because of this line:
transition: outline-color 0.5s ease-out;
It will transition the outline-color from the current color to the new colour (#ff5500), but you have not defined a current color, so the question is "what is the default value of outline-color ?
According to MDN in the formal definition, the initial value is
"invert, for browsers supporting it, currentColor for the other"
currentColor will be lime in the example you gave.
So to recap what is happening when you focus:
the outline is set to solid with 2px width
it's color is transitioned from lime to some kind of red
This can be easily fixed by simply adding a default value for the current-color to for example the same as the border color:
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
outline-color: #282828;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
I've got a search box which transitions and gets bigger when clicked on, and there is a button beside it. My problem is that the input box moves softly but the button stays in place and then teleports to its position once the transition is over. How can I trigger a transition on the button once the input box is clicked?
.searchbox {
width: 150px;
height: 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-top:10px;
}
.searchbox:focus {
width: 100%;
}
.searchbt {
float: left;
width: 15px;
height: 4px;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border:none;
margin-top:10px;
border-radius: 4px;
position:absolute;
z-index:1;
border: 2px solid #ccc;
border-right:none;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.searchbt:focus {
width=100%;
}
Thanks for your help in advance.
Edit: I temporarily fixed it by moving the button to the other side (The one which doesn't move)
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! :)
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;
}