I've been searching around. Found some similar questions on stackoverwflow and other resources, but most of them was regarding syntax mistakes.
Can somebody tell me what is wrong with this code and why SASS is not generating :hover in resulting css?
Here is my SASS code:
.img-ornament
-webkit-transition: all 0.5s ease
-moz-transition: all 0.5s ease
-ms-transition: all 0.5s ease
-o-transition: all 0.5s ease
transition: all 0.5s ease
&:hover
-webkit-transform:scale(0.75)
-moz-transform:scale(0.75)
-ms-transform:scale(0.75)
-o-transform:scale(0.75)
transform:scale(0.75)
Here is resulting css:
.img-ornament {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Where is :hover portion?
here is sassmeister's gist
https://gist.github.com/sayfulloev/396477b5a91f9511c8eb
The SASS (indented) syntax is highly whitespace sensitive. If you convert your code to SCSS syntax, you'll get a clearer idea of how it is being interpreted:
.img-ornament {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
&:hover {
-webkit-transform:scale(0.75) {}
-moz-transform:scale(0.75) {}
-ms-transform:scale(0.75) {}
-o-transform:scale(0.75) {}
transform:scale(0.75) {}
}
}
The lack of whitespace after the colon is causing the SASS interpreter to treat transform:scale(0.75) as a selector, rather than as a property/value combination. Since your selector doesn't have any styles associated with it, Sass discards the information in the compiled results.
Note that this is limited to the official Ruby Sass compiler, LibSass does not appear to have this behavior.
TLDR;
Add whitespace after your colons.
.img-ornament
-webkit-transition: all 0.5s ease
-moz-transition: all 0.5s ease
-ms-transition: all 0.5s ease
-o-transition: all 0.5s ease
transition: all 0.5s ease
&:hover
-webkit-transform: scale(0.75)
-moz-transform: scale(0.75)
-ms-transform: scale(0.75)
-o-transform: scale(0.75)
transform: scale(0.75)
Related
Is there any better and simpler way writing opacity ease-in-out effect below?
CSS:
.button-hover {
font-family: arial black;
font-size: 100px;
color: #000;
-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;
opacity: 1;
}
.button-hover:hover {
-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;
opacity: 0.5;
}
As you can see that I repeat these lines twice which does not seem ideal:
-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;
HTML:
<div class="container">
HOVER ME
</div>
jsfiddle
Don't repeat the transition rules. CSS pre-processors can help with the vendor prefixing but you really don't need to (and shouldn't) repeat the transition declarations in the :hover. Just set them once in elements's default state like so:
.button-hover {
font-family: arial black;
font-size: 100px;
color: #000;
-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;
opacity: 1;
}
.button-hover:hover {
opacity: 0.5;
}
<div class="container">
HOVER ME
</div>
Understanding CSS3 Transitions
SASS & LESS can make this easy for you. You can use SASS & LESS Mixins for this.
Example (SASS):
/* Create a Mixin (SASS) */
#mixin transition($property, $time, $method) {
-webkit-transition: $property $time $method;
-moz-transition: $property $time $method;
-ms-transition: $property $time $method;
-o-transition: $property $time $method;
transition: $property $time $method;
}
/* Include this Mixin (SASS) */
.button-hover:hover {
#include transition(opacity, 1s, ease-in-out);
}
Example (LESS):
/* Create a Mixin (LESS) */
.transition(#property, #time, #method) {
-webkit-transition: #arguments;
-moz-transition: #arguments;
-ms-transition: #arguments;
-o-transition: #arguments;
transition: #arguments;
}
/* Include this Mixin (LESS) */
.button-hover:hover {
.transition(opacity, 1s, ease-in-out);
}
This will convert into CSS:
.button-hover:hover {
-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;
}
More about SASS, LESS
Those are prefixes needed for browser support.
You can see here which browsers versions needs a prefix and decide if you can delete them based on what browsers you want to support.
For example the -moz- prefix is for Firefox and you can see that from Firefox 16 it is not needed anymore, so you can use transition without -moz- for Firefox 16+.
Read more about prefixes here.
I'm trying to have one element exit slowly and another one come in just as slow, but I want the first element to come in fast and the second one to exit fast too. Is this possible? Here's what I tried. This is for a deck.js slide set.
.slide.long.in {
-webkit-transition: -webkit-transform 5000ms ease-in;
transition: transform 5000ms ease-in;
transition: transform 500ms ease-out;
}
.slide.long.out {
-webkit-transition: -webkit-transform 5000ms ease-out;
transition: transform 500ms ease-in;
transition: transform 5000ms ease-out;
}
Deck.js has javascript functions that change the class on a section if it is previous, current, or next. Using Imgonzalves hint, I added the following classes and it seems to work.
> .slide.long.in.deck-current {
-webkit-transition: -webkit-transform 5000ms ease-in;
transition: transform 2500ms ease-in;
}
> .slide.long.in.deck-next {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.in.deck-previous {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.out.deck-current {
-webkit-transition: -webkit-transform 5000ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.out.deck-next {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 500ms ease-out;
}
> .slide.long.out.deck-previous {
-webkit-transition: -webkit-transform 500ms ease-out;
transition: transform 5000ms ease-out;
}
I want to add a simple blend-in image transition for mouse hover.
The hover itself works fine.
If I remove the display:none , the transition will work, but the hover image swap will fall apart. Any ideas how to fix that ?
Here is the CSS that I used:
div.effect img.image{
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:block;
}
div:hover.effect img.image{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div.effect img.hover{
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
display:none;
}
div:hover.effect img.hover{
display:block;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
And here is the live (not working) demo to play with: http://jsfiddle.net/46AKc/65/
Assuming all the images are the same height, you could set a fixed height on the parent element and then relatively position it.
.effect {
position:relative;
height:94px;
}
Absolutely positioning the img elements and remove display:none.
div.effect img.image {
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position:absolute;
}
The reason this works is because the child img elements are absolutely positioned relative to the parents, effectively positioning both images on top of each other. You no longer need to change the display of the element, thus allowing the transition to take place.
UPDATED EXAMPLE HERE
Alternatively, if the images aren't all the same height, omit the height, but still relatively position the parent element. As opposed to absolutely positioning both images, just position one and it will still work.
ALTERNATIVE EXAMPLE HERE
div.effect img.hover {
opacity: 0;
position:absolute;
top:0;
}
It's also worth noting that you don't need to include the transition properties on all the elements if they have the same values. Having it on the div.effect img.image will suffice.
Take a look at this example.
css
.score {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.score-big {
-webkit-transform: scale(3);
}
js
$('.score').addClass('score-big')
scale applying but without transition. When i toggling scale in chrome console, transition works. What problem?
I have a mixin:
#mixin transition($duration) {
-webkit-transition: all $durations ease-in-out;
-moz-transition: all $durations ease-in-out;
-ms-transition: all $durations ease-in-out;
-o-transition: all $durations ease-in-out;
transition: all $durations ease-in-out;
}
but in its current state it's broken because it's clearly going to look for a variable named $durations instead of $duration and then suffixing an s for seconds. Is there a way to pull this off?
You need to use string interpolation:
#mixin transition($duration) {
-webkit-transition: all #{$duration}s ease-in-out;
-moz-transition: all #{$duration}s ease-in-out;
-ms-transition: all #{$duration}s ease-in-out;
-o-transition: all #{$duration}s ease-in-out;
transition: all #{$duration}s ease-in-out;
}
.foo {
#include transition(1);
}