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.
Related
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 am trying to implement rotation for all the divs inside my website. I need this functionality on mouse hover.
You can use animation
div {
width: 100px;
height: 100px;
background-color: #ddd;
margin-bottom: 10px;
transition: all 1s ease;
}
div:hover {
animation: rotate 1s forwards alternate linear
}
#keyframes rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
<div></div>
if you would like to make it with transition so you need to add to the main class the following:
transition:all 0.3s;
note: the 0.3s represents the time, you can change it to any number like 0.7s
then you will add the following to the :hover event
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
note: deg is representing how many degrees you want them to rotate, so you can add any number rather than 90deg like 360deg
I have created a jsfiddle for you check that out so, you get the ideas how rotation works.
div{
height:100px;
width:100px;
background-color:#000;
margin:50px;
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
div:hover{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-0-transform:rotate(45deg);
}
<div>
</div>
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.
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/
This is the background image:
#logo
{background-image:url('logo.png');width:20px;height:23px;}
#logo:hover
{background-position:0 -23px;-webkit-transition: all 0.5s ease;}
#logo span
{margin-left:-3000px;}
<div id="logo"><span>logo</span></div>
This code gives me a slide effect (a vertical slide from the black S to the pink one) instead of the fade effect I'm looking for. Creating two images, would solve the issue, but that is not possible in this case.
How do I get the fade affect when using only one single image?
Try this - http://jsfiddle.net/Wds5z/4/
a, #logo {
background: url('http://i.stack.imgur.com/w5ZnN.png') 0 -23px;
width: 20px;
height: 23px;
display: block;
}
#logo {
background-position: 0 0;
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
transition: opacity .5s linear;
}
#logo:hover {
opacity: 0;
}
#logo span {
margin-left:-3000px;
}