Issue
I am trying to give users a "flash" of color when there is a click event. I can get the color to appear in a pleasing fashion using a transition, however I want the color to disappear after .5s, without removing the "active" class. One requirement though is that I cannot use jQuery animations and this must be done in CSS.
Below is the css I am using currently.
.active{
background-color: yellow;
-webkit-transition: background-color .5s linear;
transition: background-color .5s linear;
}
I tried specifying a second value however I do not think this is valid markup as it does not work.
.active{
background-color: yellow;
-webkit-transition: background-color .5s linear, background-color:transparent .5s linear;
transition: background-color .5s linear, background-color:transparent .5s linear;
}
http://jsbin.com/itivum/1/edit
Solution
I think this is what you are looking for. The sample is not exact.
$("#go").click(function() {
$("#box").removeClass("demo");
setTimeout(function() {
$("#box").addClass("demo");
}, 1);
});
.container {position: relative;}
#box {
height: 100px;
width: 100px;
background-color: #777;
position: absolute;
left: 5px;
top: 5px;
opacity: 0;
}
@-webkit-keyframes demo {
0% {
background-color: Yellow;
opacity:1;
}
22% {
background-color: Yellow;
}
77% {
background-color: Red;
}
100% {
background-color: #777;
}
}
.demo {
-webkit-animation-name: demo;
-webkit-animation-duration: 900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="go">Go</button>
<div class="container">
<div id="box"></div>
</div>
Hope you will get the solution you are looking for from this.
EDIT :
I have edited your JS Bin.
This will be what you are exactly looking for
Answered By - Rohith
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.