Menu item default background-color is white. Mouse hover color is blue
My question is -
If we hold on the mouse hover on the menu item. first need to show blue color later 1 or 2 sec the color should change to some other color yellow.
Is it possible with css Transitions or any idea with CSS?
Try this maybe help
HTML
<div class="test"><div></div></div>
CSS
.test{
width:100px;
height:100px;
background-color:#0ff;
-webkit-transition:background-color 1s ease-in;
-moz-transition:background-color 1s ease-in;
-o-transition:background-color 1s ease-in;
transition:background-color 1s ease-in;
}
.test div{
width:100px;
height:100px;
-webkit-transition:background-color 3s ease-in;
-moz-transition:background-color 3s ease-in;
-o-transition:background-color 3s ease-in;
transition:background-color 3s ease-in;
}
.test:hover{
background-color:#f00;
}
.test div:hover{
background-color:green;
}
jsFiddle
You can achieve this with CSS3 animations (works in modern browsers). Here's an example which changes the color of the button from grey to blue and then yellow.
Hope that helps!
Demo - jsFiddle
HTML
<div class="button"></div>
CSS
.button {
width: 150px;
height: 50px;
background-color: #e3e3e3;
border: 1px solid #000000;
}
.button:hover {
-webkit-animation: color 1.0s forwards;
-moz-animation: color 1.0s forwards;
-o-animation: color 1.0s forwards;
}
#-webkit-keyframes color {
0% { background-color: #0000ff; }
50% { background-color: #0000ff; }
100% { background-color: #ffff00; }
}
#-moz-keyframes color {
0% { background-color: #0000ff; }
50% { background-color: #0000ff; }
100% { background-color: #ffff00; }
}
#-o-keyframes color {
0% { background-color: #0000ff; }
50% { background-color: #0000ff; }
100% { background-color: #ffff00; }
}
I think this might be what you are looking for.
http://www.acuras.co.uk/articles/53-javascript--css-flashing-text--how-to-do-it--why-not-to-do-it
Honestly, I have no idea why you need such a link, it will just make your website seem like it was made by a complete beginner, because it is very distracting. There are much nicer animations and plugins out there, especially if you use jQuery. Check this out for inspiration: http://bestofjquery.com/
Related
How will I add a transition to this CSS code after the hovering effect. The image is a background image of div. What I wanted is to add a transition between the zoom effect.
.animations {
background: url('resources/image.jpg');
background-size: 300px 300px;
height: 250px;
transition: 10s ease-out;
}
.animations:hover {
animation: effect 2s forwards;
}
#keyframes effect {
0%{background-size: 100%}
100%{background-size: 120%;}
}
In .animation and .animation:hover you put something like this:
transition:2s linear;
-webkit-transition:2s linear;
-mos-transition:2s linear;
And in the .animation:hover you put the change you want to make, like:
.animations {
background-color: #000;
transition:0.4s linear;
-webkit-transition:0.4s linear;
-mos-transition:0.4s linear;
}
.animations:hover {
background-color: #fff;
transition:0.4s linear;
-webkit-transition:0.4s linear;
-mos-transition:0.4s linear;
}
In this example it will transition from black to white in 0.4s (change linear to whatever you want)
Please try this code.
<html>
<head>
<style>
.animations {
background-image: url('https://data.whicdn.com/images/273956252/superthumb.jpg?t=1484219209');
background-size: 50% 50%;
background-repeat: no-repeat;
height: 100%;
transition: 10s ease-in;
-webkit-transition:10s ease-in;
-moz-transition:10s ease-in;
}
.animations:hover {
animation: effect 2s forwards;
}
#keyframes effect {
0%{background-size: 50% 50%;}
100%{background-size: 100% 100%;}
}
</style>
<title>css</title>
</head>
<body>
<div class="animations">Images</div>
</body>
</html>
I hope above information will be useful for you.
Thank you.
I would like to use a single #keyframes rule to animate an element from one state to another and then to get back to the original state when I do an action (with the same animation). I saw that using animation-direction: reverse; is a way to play the animation in reverse. However, when I try to use it, the transitions on my element disappear. If I set a new #keyframes with the reversed state it works fine.
What is the point of animation-direction in this case? I am misunderstanding something?
Is there a way to play an animation in both directions with a single #keyframes rule without loosing the transitions? I can't use transition, I need animation.
Here is a example to play with (hover the squares):
div {
width: 100px;
height: 100px;
animation: fade 0.6s ease-in-out forwards;
margin: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
#box-1:hover {
animation: fade 0.6s ease-in-out forwards;
animation-direction: reverse;
}
#box-2:hover {
animation: fadeReverse 0.6s ease-in-out forwards;
}
#keyframes fade {
0% { background: red; }
100% { background: blue; }
}
#keyframes fadeReverse {
0% { background: blue; }
100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>
It's because you apply the same animation to the element on hover as the animation that is on the default state of the element.
So the element already had that animation with the default direction but then you apply it again with the reverse. But it won't work. I don't really know why this happens. But applying the same animation on an element twice, won't work. So you need 2 different keyframes.
You can use a reverse animation or duplicate the existing one and use it with direction: reverse
Read more here
restart animation
more info here
another article here
If you REALLY want to use just 1 animation this can be solved with javascript by removing and adding an 'animate-me' class . But it still wouldn't be ideal
div {
width: 100px;
height: 100px;
animation: fade 0.6s ease-in-out forwards;
margin: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
color: white;
}
#box-1:hover {
animation: fade2 0.6s ease-in-out forwards;
animation-direction: reverse;
}
#box-2:hover {
animation: fadeReverse 0.6s ease-in-out forwards;
}
#keyframes fade {
0% { background: red; }
100% { background: blue; }
}
#keyframes fade2 {
0% { background: red; }
100% { background: blue; }
}
#keyframes fadeReverse {
0% { background: blue; }
100% { background: red; }
}
<div id="box-1">:(</div>
<div id="box-2">:)</div>
I have the following class:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
}
I modified the class like this:
.dot{
width:40px;
height:40px;
position:absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index:999;
margin-top:-60%;
pointer-events:none;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
What I tried to do was to apply a transition so that the div is not initially shown when the page is opened but it reaches opacity: 1; after 1s has passed.
I did some research and all I could find on SO and Google was related to hovering. I tried applying "opacity: 0;" to my class but then the transition wouldn't take place, the div would just stay hidden.
Is there any way to accomplish an opacity transition without a hover state using CSS?
You can accomplish this with CSS3 animation:
.dot{
width:40px;
height:40px;
position:absolute;
background:url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size:100% 100%;
z-index:999;
pointer-events:none;
animation:fadeIn 1s ease-in;
}
#keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
<div class="dot"></div>
You can achieve this using css animations.
The animation is set using the #keyframes rule. To illustrate in the example, I removed the margin top; this is not a necessary change in your code.
.dot {
width: 40px;
height: 40px;
position: absolute;
background: url(https://www.sporedev.ro/pleiade/images/Frunza.png);
background-size: 100% 100%;
z-index: 999;
// margin-top:-60%;
pointer-events: none;
animation: fadein 1s ease-in;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="dot"></div>
Yes, use JavaScript to trigger the transition. That is the answer to your question. A transition only happens when there is something to transition to. Just sepcifying a transition on an element does not trigger the transition. Change does. When the element first loads there is nothing to transition to.
I have an element that is red in resting state, and green when the user hovers their cursor over it. I have it set to ease the transition for 0.4s.
Instead of having the colour transition straight from red to green, I'd like it to pass through yellow at the midway point. So when the user mouses over it, it goes from red to yellow to green in one smooth transition. Is this possible?
This is my current code.
.element {
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.element:hover {
background-color: green;
}
You can use the CSS #keyframes animation syntax.
#keyframes animate-color {
0% { color: red; }
50% { color: yellow; }
100% { color: green; }
}
element:hover {
animation: animate-color 0.4s forwards;
}
Change the 0.4s value to control how fast the animation runs.
Here's an example for Chrome using -webkit-animation and #-webkit-keyframes:
https://jsfiddle.net/ahm2u8z2/1/
Make sure you cover all browser possibilities as the syntax is different for Chrome, Firefox, Internet Explorer and Opera.
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
Here's more information for configuring your animations in CSS3, you can control things such as animation-delay, animation-direction, and many more.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
Alteratively, if you're not up to using #keyframes (although I don't see why not), you can use pseudo elements to act as the middle color. All you need to do is control the delay of the transitions using transition-delay:
.element {
width: 100px;
height: 100px;
background-color: red;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
position: relative;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:before {
position: absolute;
width: 100%;
height: 100%;
content: "";
background: green;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
opacity: 0;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.element:hover:before {
opacity: 1;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.element:hover {
background-color: yellow;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
<div class="element"></div>
you could use keyframes for this:
.element {
background-color: red;
height: 300px;
width: 300px;
}
.element:hover {
-webkit-animation: changeColor 0.4s forwards;
animation: changeColor 0.4s forwards;
}
#-webkit-keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
#keyframes changeColor{
0%{background: red;}
50%{background:yellow}
100%{background:green}
}
<div class="element"></div>
This works by adding the keyframe sequence when the element is hovered, and not during the actual element's creation (so the keyframes only work during the hovered stage).
The forwards declaration is used so that the animation will 'pause' on the '100%' keyframe, rather than looping back and 'finishing where it started'. I.e. the first keyframe.
Please note: Other prefixes will need to be included see here for more info.
I'm working on my first CSS keyframe animation and would like to know how it would be possible to pause an animation after it finishes its first run-through. You can check out my site here: http://www.tommaxwell.me and the grey quote at the bottom has a hover animation that you can see. However, once the animation is over it resets. How should I go about stopping it so that it stays in the end state of the animation when it's finished?
I know the use of a keyframe animation in this case is kind of lame and unnecessary, but I'm really just testing out keyframes, and will use it better later. :)
As #Mr. Alien answered, transitions is to prefer for this, but since you asked - it is possible to maintain the last state in an animation.
You do this by adding animation-fill-mode: forwards;
Here's a demo
Here's the code from my example:
HTML
<div class="text">Hover here</div>
CSS
.text {
color: blue;
}
.text:hover {
-webkit-animation: color 1.0s ease-in forwards;
-moz-animation: color 1.0s ease-in forwards;
-o-animation: color 1.0s ease-in forwards;
animation: color 1.0s ease-in forwards;
}
#-webkit-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-moz-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#-o-keyframes color {
0% { color: blue; }
100% { color: red; }
}
#keyframes color {
0% { color: blue; }
100% { color: red; }
}
Here's a good resource if you want to read about the the ‘animation-fill-mode’ property.
http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property
I know what you are doing here, use CSS transition instead
Demo
.class {
color: #ff0000;
transition: color 2s;
-moz-transition: color 2s; /* Firefox 4 */
-webkit-transition: color 2s; /* Safari and Chrome */
-o-transition: color 2s; /* Opera */
}
.class:hover {
color: #00ff00;
}
You wont be able to preserve the hovered state of your text, for that you need to use JavaScript