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.
Related
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.
I'm using ccs3 to fade in an image on hover. I'd like that same image that fades in on hover to rotate. I seem to be missing something.
Here is a jsfiddle. http://jsfiddle.net/5ftZ7/
<div id="cf">
<img class="bottom" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin-over.png" /> <img class="top" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin.png" />
</div>
#cf {
position:relative;
margin:30px auto;
width:200px;
height:200px;
}
#cf img {
margin-top:30px;
position:absolute;
left:0;
top:0;
-webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;
-webkit-transition: -webkit-transform 0.2s ease-in;
}
#cf img.top:hover {
opacity:0;
position:absolute;
left:0;
top:0;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
There are a variety of issues that culminate in this not working the way you want:
Understanding of transition rules
CSS properties cannot accumulate. There is nothing special about the transition rule:
transition: opacity .2s ease-in-out;
transition: transform .2s ease-in-out;
The second declaration overrides the first. This would be no different than:
color: red;
color: blue;
being blue. You can use multiple comma-separated transition definitions, or use the special all property:
transition-property: opacity, transform;
transition-duration: .2s;
transition-timing-function: ease-in-out;
/* or */
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
/* or, but this may affect properties you do not want */
transition: all .2s ease-in-out
:hover with stacked elements.
.top is on top of .bottom, so .bottom cannot be hovered even when .top is transparent. This prevents rules that you would want to apply to .bottom from being applied. The simplest solution to this is just to check for :hover on #cf instead, as in #cf:hover img.top as the selector.
transform missing from .bottom
.bottom also needs the transform rules when it is hovered so it can rotate in sync with .top.
Here is a working example using only -webkit and increasing the transition durations for effect.
http://jsfiddle.net/ExplosionPIlls/5ftZ7/1/
I guess what you are trying to achieve is this:
Fiddle: http://jsfiddle.net/marionebl/5ftZ7/2/.
Includes -webkit- only for brevity. What this does:
Uses the former .bottom as first layer in stack
Replaces .bottom with a html element mimicking the image in your fiddle. Could be a png with transparency, too.
Listen for :hover state on #cf instead of .bottom or .top
Fade the former .bottom in, rotate the former .top
you can't use several transitions on an element,
if you want to apply transition to several properties you can use "all"
transition: all 1s;
or comma separated transition:
transition: opacity 1s, transform 0.8s;
#keyframes rotation {
0% {
transform: rotate(0deg);
opacity: 0;
}
100% {
transform: rotate(359deg);
opacity: 1;
}
}
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;
}
So I've these CSS3 script
#place.us .level1 { background-position: -100px; background-color: #333; }
#place.gb .level1 { background-position: -100px; background-color: #CCC; }
#-webkit-keyframes place-pop-livel1 {
0% { bottom: -100px; }
100% { bottom: 30px; }
}
#place .level1 {
animation: place-pop-livel1 2s ease-out;
-moz-animation: place-pop-livel1 2s ease-out;
-webkit-animation: place-pop-livel1 2s ease-out;
}
When the page first loads, the div has #place.us and the animation works perfectly. Now I want to change the class of the div to 'gb' to make it #place.gb using jquery and as soon as the class is changed, I want the same animation to happen.
My jquery code is simple
$('.change-city').live('click', function(){
var city = $(this).data('city'); //gb or us
$('#place').removeClass().addClass(city);
});
The class changes and the .level1 property is affected as declared in the CSS but the animation doesn't happen. How do I make sure that the animation happens?
I'd recommend using CSS transitions as they have better browser coverage, they are simpler to manage and they fallback better (if the browser doesn't support transitions it does the same thing without the animation).
You problem can be solved like this:
// after load add the animation
$(".level1").addClass("pop");
// after the animation is done hide it again
$(".level1").bind("webkitTransitionEnd mozTransitionEnd oTransitionEnd msTransitionEnd transitionend", function(){
$(this).removeClass("pop");
});
$('.change-city').live('click', function(){
var city = $(this).data('city'); //gb or us
$('#place').removeClass().addClass(city).find(".level1").addClass("pop");
});
And the CSS
#place.us .level1 {background-color: #333; }
#place.gb .level1 {background-color: #CCC; }
#place .level1 {
position: absolute;
background-color: #000;
width: 100px;
height: 100px;
bottom: -100px;
-webkit-transition: bottom 2s ease;
-moz-transition: bottom 2s ease;
-o-transition: bottom 2s ease;
-ms-transition: bottom 2s ease;
transition: bottom 2s ease;
}
#place .pop {
bottom: 30px
}
You can check out the jsfiddle here: http://jsfiddle.net/EmsXF/