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">
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 have an on click dropdown menu thats animated on height, however, it has a 2px border and the border always appears when the menu is closed. Basically, it shows a little 2px strip where the menu would come out. I'm working in local, so its a bit hard to send all the code, but it's something like this:
(user__nav is a ul)
.user__nav {
margin-top: 10px;
background-color: #fff;
position: absolute;
border: 2px solid #2D3E65;
border-radius: 0 0 12px 12px;
max-height: 0;
overflow: hidden;
transition: max-height 0.7s;
ul>li {
padding: 5px 0 5px 20px;
a {
color: #2D3E65;
font-weight: 500;
}
&:hover {
background-color: #2D3E65;
a {
color: #fff;
}
}
&:last-child {
border-radius: 0 0 9px 9px;
}
}
}
}
when the element is clicked, I apply the following class to it:
.profile-transition {
max-height: 170px !important;
}
I also tried taking out the border from .user__nav {} and putting it in profile-transition but it doesn't seem to work at all:
.profile-transition:before {
border: 2px solid #2D3E65;
}
.profile-transition:after {
border: 2px solid #2D3E65;
}
Anything would help! Thank you!
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! :)
Is it possible to scale a text input only on the X axis while maintaining the size of the font?
I did something like this:
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
transform-origin: top left;
}
#searchInput:hover {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
#searchInput:focus {
border-bottom: 3px solid blue;
transform: scaleX(25);
}
<input type="text" id="searchInput" name="search">
The result is the cursor on the middle of the input and the text stretched
Doing the same animation changing the width instead of scaling the input works, but I'm curious if it can be done with a transform.
Its not the correct way to implement this material type input text. Use background-position on :focus, :valid on the bottom border of input.
You should use something like the snippet below:
input::-webkit-input-placeholder, button {
transition: all 0.3s ease-in-out;
}
input {
margin: 40px 25px;
width: 200px;
display: block;
border: none;
padding: 10px 0;
border-bottom: solid 1px #1abc9c;
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
background-position: -200px 0;
background-size: 200px 100%;
background-repeat: no-repeat;
color: #0e6252;
}
input:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
transform: translateY(-20px);
visibility: visible !important;
}
<input placeholder="Username" type="text" required="">
Hope this helps!
I think you would need to work with the width rather than using scale. This way the input will change width without applying any scaling to its content.
#searchInput {
text-decoration: none;
display: inline-block;
background-color: rgba(0, 0, 0, 0);
border: none;
border-bottom: 3px solid transparent;
width: 10px;
border-bottom-color: blue;
padding-left: 10px;
padding-bottom: 5px;
height: 40px;
font-size: 30px;
color: #307fff;
transition: 1s ease;
}
#searchInput:hover {
border-bottom: 3px solid blue;
/*
Instead of using scale just change the width
your transition will take care of animation
*/
width: 250px;
}
#searchInput:focus {
border-bottom: 3px solid blue;
width: 250px;
}
<input type="text" id="searchInput" name="search">
I want to do fade in and fade out effects using only CSS. If I move or hover over one div element, I then need to call another DIV to fade in, snd then it should fade out agsin when the mouse leaves. DOM element calling and effect should be in CSS or CSS3. I can't use javascript and Jquery.
<style>
#b
{
width: 200px;
height: 40px;
background: red;
border-radius: 10px;
text-align: center;
margin: 35px;
padding: 30px 0px;
box-shadow: 2px 4px 10px 2px;
opacity:0;
color: white;
font: 20px bold;
}
#a
{
width: 200px;
height: 40px;
background: rgb(156, 155, 155);
border-radius: 10px;
text-align: center;
cursor: pointer;
margin: 35px;
padding: 30px 0px;
box-shadow: 2px 4px 10px 2px;
color: white;
font: 20px bold;
}
#a:hover + #b {
animation:myfirst 1s;
-webkit-animation:first 1s;
opacity:1;
}
#keyframes first
{
from {opacity:0.1;}
to {opacity:1;}
}
#-webkit-keyframes first
{
from {opacity:0.1}
to {opacity:1;}
}
</style>
<div id="a">Hover</div>
<div id="b">show</div>
You can easily achieve that with opacity and the adjacent sibling combinator.
Check out the jsfiddle for a vendor prefixed version.
#container + div {
transition: opacity .25s;
opacity: 0;
}
#container:hover + div {
opacity: 1;
}
Transition browser support
Adjacent sibling combinator (+ selector) documentation