I have a textarea and on focus I would like to animate both Border Shadow and Border Radius, the problem is if I try to combine those two together Border Radius animation does not work it just "Pops Out" without any animation. I have created a Fiddle to show you my problem.
Code looks like this:
textarea{
display: block;
padding-left: 3px;
padding-right: 3px;
border: 1px solid #e7e7e7;
box-shadow: 0 0 3px #e7e7e7;
background: none;
color: #6b6b6b;
max-width: 100%;
}
textarea:focus {
outline: none;
box-shadow: 0 0 25px #9ecaed;
-webkit-transition: box-shadow linear 1s;
transition: box-shadow linear 1s;
border-color: #9ecaed;
transition : border 500ms ease-out;
-webkit-transition : border 500ms ease-out;
-moz-transition : border 500ms ease-out;
-o-transition : border 500ms ease-out;
}
CSS doesn't work the way you're expecting it to.
After setting transition: box-shadow linear 1s; you are overriding it with transition : border 500ms ease-out;. You have to set them both on the same property.
Like so (Fiddle):
textarea:focus {
outline: none;
box-shadow: 0 0 25px #9ecaed;
border-color: #9ecaed;
transition: box-shadow linear 1, border 500ms ease-out;
-webkit-transition: box-shadow linear 1, border 500ms ease-out;
-moz-transition: box-shadow linear 1, border 500ms ease-out;
-o-transition: box-shadow linear 1, border 500ms ease-out;
}
Related
Consider the following output:
In the output, you can notice weird corners in the username input (extra white-colored edges.) But they do not appear in the password input.
What might be causing this? Is there any way in CSS to fix this weird behavior?
(Note: I use Chrome as my browser.)
I looked for solutions on Google, but did not find any. I would like the weird corners of the rounded border to not appear.
#input-box{
outline: none !important;
width: 60%;
height: 38px;
padding: 8px 10px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #c1bdb8;
border-radius: 4px;
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-webkit-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
-moz-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
-o-transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
transition: all border-color ease-in-out .15s, box-shadow ease-in-out .15s ease-out;
border-radius: 0 !important;
-webkit-appearance: none !important;
}
<input type="text" id="input-box" placeholder="Enter Something">
I have this input field that works fine on chrome and firefox:
but not on IE - it looks like this:
And like this when I click the field:
Here's the css for the input type being used:
input[type="text"], input[type="password"], textarea, select, checkbox, radio {
border: 1px solid #ddd;
padding: 5px;
color: #777;
border-radius: 3px;
line-height: normal;
-moz-transition: box-shadow ease-in-out 0.5s, border ease-in-out 0.5s;
-webkit-transition: box-shadow ease-in-out 0.5s, border ease-in-out 0.5s;
-o-transition: box-shadow ease-in-out 0.5s, border ease-in-out 0.5s;
transition: box-shadow ease-in-out 0.5s, border ease-in-out 0.5s;
}
Any thoughts how to fix it?
Try adding a background-color: white; to the css for the input element.
the effect im after is the following: the button doesn't look like a button (ie border: none) and when clicked I want the focus outline to fade out after n seconds.
How can i achieve that?
Thanks
Simply adding a transition. Important to remember is that you need to transition the outline-color, not the outline.
.no-button {
margin:15px;
border:none;
}
.no-button:focus {
outline-color:transparent;
-webkit-transition: outline-color .7s ease-out 1s;
-moz-transition: outline-color .7s ease-out 1s;
-o-transition: outline-color .7s ease-out 1s;
transition: outline-color .7s ease-out 1s;
}
<button class="no-button">This is no button</button>
The first time (.7s) is the duration, the second one (1s) is the delay.
For getting such an effect border is better than outline and I played a little bit with it for you and the result is as follow:
button {
background: border-box linear-gradient(#841518, #4C0C00) no-repeat;
font-size: x-large;
font-family: Sans;
border: none;
transition: border-color 0.7s 0.2s;
border-width: 15px;
box-sizing: border-box;
height: 80px;
width: 220px;
display: inline-block;
}
button:focus {
border-style: solid;
border-color: transparent;
outline: none;
}
<button type="button">Click here</button>
I have the following CSS / HTML code:
CSS:
#buttons a {
margin: 0 30px;
display: inline-block;
position: relative;
padding: 9px 3px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
#buttons a span{
background: #242424;
font-size: 1.7em;
color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
position: relative;
width: 100%;
height: 100%;
padding: 5px 40px;
-webkit-transition: background 500ms ease-in-out;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
}
HTML:
<a class="restaurant_book_button" href="/book"><span>Book Online</span></a>
How it renders in Safari:
How it renders in Chrome:
Any ideas what could be causing this?
Try box-sizing with -webkit prefix in span because you are using padding while your span width is 100%.
Here I have an animation that makes a blinking border next to the title you're hovering on:
#link_list a:hover {
border-left: 10px solid #E3E3E3;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes blink {
0% { border-left: 10px solid rgba(215, 215, 215, 1); }
50% { border-left: 10px solid rgba(215, 215, 215, 0); }
100% { border-left: 10px solid rgba(215, 215, 215, 1); }
}
Now, the problem is that the transition doesn't support the animation.
I already fixed it for the transition-in with the animation-delay property, but the transition-out doesn't work because the animation is running.
FIDDLE
This is a bit of a hack way to do this, but you can accomplish the effect you are looking for with positioning.
Basically, instead of setting the border width to be 0px when the links are not being hovered, set the width to 10px (the same as onHover) and use relative positioning to move the element to the left 10px, as if the border is not there.
Then set the animation of the left property to be 0.2s ease and set left: 0 in the :hover state.
#link_list a{
border-left: 10px solid transparent;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease, left 0.2s ease;
position: relative;
left: -10px;
}
#link_list a:hover {
left: 0px;
}
With this, you can remove the transition-delay as well.
JSFiddle
You should use left: -10px; property instead of transition-delay: 0.2s; animation properties, add this properties into things #link_list a{ },
Check this Demo jsFiddle
CSS
#link_list a{
color: inherit;
text-decoration: none;
border-left: 0px solid transparent;
border-width: 0px;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease;
left: -10px; // ADD THIS NEW
}