I'm trying to make hover effect the element
Here is my code piece and a fiddle
http://jsfiddle.net/Fbk9t/
/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
#keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Firefox */
#-moz-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Safari and Chrome */
#-webkit-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Opera */
#-o-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/
.firstelement {
display:inline-block;
animation:myAnim1 5s;
-moz-animation:myAnim1 5s infinite;
-webkit-animation:myAnim1 5s infinite;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
}
.firstelement:hover {
background-color: #ff0000;}
So simply the animation keeps running no matter how I set my hover. hat is the correct route to solve a situation like this?
Notice the transition also..
You need to stop the animation loop when you :hover your element, so:
.firstelement:hover {
background-color: #ff0000;
animation: none;
-moz-animation: none;
-webkit-animation: none;
}
here is the example http://jsfiddle.net/Fbk9t/1/
I hope it helps you ;)
Change the following code from infinite to 1:
Old version:
-moz-animation:myAnim1 5s infinite;
-webkit-animation:myAnim1 5s infinite;
New version
-moz-animation:myAnim1 5s 1;
-webkit-animation:myAnim1 5s 1;
Related
I'm currently developing a css theme for YouTube.com and I'm faced with a particular issue:
An animation I've applied for buttons is set to have the fill mode "forwards" so that it stays at its final frame. However, doing this overwrites any style I apply with the :active rule.
How do I get around this?
#keyframes button_hoverin {
from { background: white; }
to { background: red; }
}
#keyframes button_hoverout {
from { background: red; }
to { background: white; }
}
#button {
animation: button_hoverout 0.5s forwards;
}
#button:hover {
animation: button_hoverin 0.5s forwards;
}
#button:active {
background: blue !important; /* even with "!important" it's overwritten.*/
}
<button id="button">Button sample</button>
You can simply reset the animation-fill-mode in :active:
#keyframes button_hoverin {
from { background: white; }
to { background: red; }
}
#keyframes button_hoverout {
from { background: red; }
to { background: white; }
}
#button {
animation: button_hoverout 0.5s forwards;
}
#button:hover {
animation: button_hoverin 0.5s forwards;
}
#button:active {
background: blue;
animation-fill-mode: none;
}
<button id="button">Button sample</button>
However note that Chrome on macOs doesn't run at all your animation (probably because they have trouble with System Colors. See here for more info).
I'm looking to add a blinking caret / cursor inside the form in a twitter bootstrap 3 site. There is a codepen for the html and css but I need help on where to add the code, if the code works with bootstrap? I'm new and eager to learn but I have browsed and browsed and got no results.
The codepen is here
http://codepen.io/ArtemGordinsky/pen/GnLBq
html
<span class="blinking-cursor">|</span>
css
.blinking-cursor {
font-weight: 100;
font-size: 30px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
Simply wrap the input and the blinking icon into a container, then position the blinking icon inside the input.
/* The container */
.input-container {
position: relative;
}
/* Ensure the font-size is the same as the blinking icon */
.input-container input {
border: 1px solid gray;
font-size: 30px;
padding:0 5px;
}
/* Position it where you want. Must be position: absolute! */
.input-container .blinking-cursor {
position: absolute;
left: 5px; /* The same as padding on the input */
}
/* This will hide the blinking cursor when the user clicks on the input */
.input-container input:focus + .blinking-cursor{
visibility: hidden;
}
/* The code below is from the codepen: http://codepen.io/ArtemGordinsky/pen/GnLBq */
.blinking-cursor {
font-weight: 100;
font-size: 30px;
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from, to {
color: transparent;
}
50% {
color: black;
}
}
<div class="input-container">
<input type="text">
<span class="blinking-cursor">|</span>
</div>
You may want to edit the styles further, but this will put you in the direction you're wanting to go.
Another question with using CSS.
I would like to have the header's background-color transitioning from it's current to another when hovering (due to multiple sites having different colors).
I made a CSS-transition-animation for it, but it doesn't seem to be working.
What am I doing wrong?
#header
{
background-color: #3cff9c;
float: left;
text-align: center;
width: 100%;
}
#header:hover
{
/*Animation*/
-webkit-animation: colorChange_blue 1s; /* Safari, Chrome, Opera*/
-moz-animation: colorChange_blue 1s; /*Firefox*/
animation: colorChange_blue 1s; /*Standard*/
/*Safari, Chrome, Opera*/
#-webkit-keyframes colorChange_blue
{
from
{background-color;}
to
{background-color: #008c74;}
}
/*Firefox*/
#-moz-keyframes colorChange_blue
{
from
{background-color: currentColor;}
to
{background-color: #008c74;}
}
/*Standard*/
#keyframes colorChange_blue
{
from
{background-color: currentColor;}
to
{background-color: #008c74;}
}
}
how about solving it without keyframes and just standard hover with transitions?
#header {
height: 50px;
width: 100px;
background-color: #3cff9c;
transition: background-color 1s;
}
#header:hover {
background-color: #008c74;
}
<div id="header"></div>
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
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
http://jsbin.com/imonab/1/edit
I came up with the following based on my own needs. I wanted a flash of color to confirm a user action. The text flashes once when you click on it. It does use jquery to set the class, but not for the animation.
Html:
<span style="background:lightgray" id="id">Click to flash</span>
Js:
$('#id').click(function() {
$('#id').addClass('flash');
setTimeout(function() {
$('#id').removeClass('flash');
}, 500);
});
Css:
.flash {
-webkit-animation-name: flash-animation;
-webkit-animation-duration: 0.3s;
animation-name: flash-animation;
animation-duration: 0.3s;
}
#-webkit-keyframes flash-animation {
from { background: yellow; }
to { background: default; }
}
#keyframes flash-animation {
from { background: yellow; }
to { background: default; }
}
See http://jsfiddle.net/umz8t/3597/
Impressed by Rohith's answer, here is my own JSFiddle demo (with added functionality)
The main part is the CSS (or as I prefer, SCSS):
#-webkit-keyframes quickFlash {
0% {
background-color: yellow;
opacity: 1;
}
100% {
background-color: inherit;
}
}
.quickFlash {
//https://stackoverflow.com/questions/16791851/a-flash-of-color-using-pure-css-transitions
-webkit-animation-name: quickFlash;
-webkit-animation-duration: 1900ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-name: quickFlash;
-moz-animation-duration: 1900ms;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
}
And I also found it useful to be able to have the class remove itself at the end of the animation (so that I could later add it again if I wanted to see the animations again):
function flashYellow(element) {
element
.addClass("quickFlash")
.on(
"webkitAnimationEnd oanimationend msAnimationEnd animationend",
function() {
console.log("animationend");
$(this)
.delay(500)// Wait for milliseconds.
.queue(function() {
console.log("end of delay");
$(this)
.removeClass("quickFlash")
.dequeue();
});
}
);
}
Here is a test I created to show my situation
http://jsfiddle.net/2vN2S/
/* Setting up the "myAnim1" for all browser types
-------------------------------------------------*/
#keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Firefox */
#-moz-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Safari and Chrome */
#-webkit-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Opera */
#-o-keyframes myAnim1 {
0% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
/* Attaching the animations to the elements
Notice the difference between timing!!
-------------------------------------------------*/
body {
display:inline-block;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-ms-transition: 0.3s ease;
-o-transition: 0.3s ease;
transition: 0.3s ease;
animation:myAnim1 5s steps(2, end);
-moz-animation:myAnim1 5s steps(2, end) infinite;
-webkit-animation:myAnim1 5s steps(2, end) infinite;
}
As you can see, I've set up a stepped animation, and a transition for the body background. What I expected was the transition to create the 0.3 second "smoothness" (easing) between each step of the animation, however, it looks like the animation takes the whole control of the background color.
Is there any way to create something like that in an easy way?
Increasing the number of steps works steps(36,end)
Working fiddle http://jsfiddle.net/DeepakKamat/y2vWp/4/
CSS Transitions trigger if the state of the element changes, e.g. it's :hovered or it gets a new class from JS. Steps of CSS animation aren't changes of state, so they don't trigger transitions. Maybe this explanation was wrong and the problem is that one property can't be animated by different mechanisms in the same time.
If you need smooth transitions between steps, you can use an ordinary linear animation instead of step animation, like this:
#keyframes myAnim1 {
0% {
background-color: #212121;
}
45% {
background-color: #212121;
}
50% {
background-color: #31f4dc;
}
95% {
background-color: #31f4dc;
}
100% {
background-color: #212121;
}
}
(edited JSFiddle example)