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);
}
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'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)
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'm using Twitter Bootstrap to build a website, and I want to have an image appear as grayscale until I hover over it, at which point it should become full color.
Instead of editing the Bootstrap.css, I created my own custom css: 'starter-template.css'.
Here's the code in 'starter-template.css':
.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999px;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
And here's the html:
<!-- Custom styles for this template -->
<link href="static/starter-template.css" type = "text/css" rel="stylesheet">
....
<img class = "thumbnail2" src="{{my_string}}" align="right" height = "200" width = "200">
However, there is no hover effect--the image appears as full color when the page loads and doesn't change when I hover over it. Any suggestions?
Thanks!
Think fixing your z-index is all you need: http://jsfiddle.net/c8wtbjfw/
.thumbnail2 {
-webkit-filter: grayscale(100%);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
-webkit-filter: grayscale(0%);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
Seems to work when I test it in Chrome (36.0.1985.143). Since that's a Webkit filter, it won't work in IE or Gecko-based browsers.
An alternative might be to transition the opacity rule, since that has better support. Here's the same CSS, but with opacity instead: http://jsfiddle.net/c8wtbjfw/1/
.thumbnail2 {
opacity: .5;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
opacity:1;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
I did remove your z-index, since I'm not sure what you're trying to accomplish by pushing the image "under" the rest of the page.
Try this:
.thumbnail2 {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(100%); /* Webkit Nightlies & Chrome Canary */
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
.thumbnail2:hover {
filter: none;
-webkit-filter: grayscale(0);
z-index: -9999999999999999999999999;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
-ms-transition: all 0.9s ease-in-out;
transition: all 0.9s ease-in-out;
}
In my header, I have this CSS specified.
a:link {
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color:#3462D6;
}
a:visited {
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color:#3462D6;
}
a:hover {
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color:#82D1F7;
}
a:active {
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color:#3462D6;
}
a {
text-decoration: none;
}
For most of the links, the transitions are working, however links that I have visited do not play the animation in Chrome (And I would assume other webkit browsers as well) Within Firefox however, all links do the transition animation just fine.
What could be the cause of the links not transitioning in Chrome?
The url is http://www.fuyuri.com
Move the active state above the hover state. - link, visited, active, hover, focus and you need to apply the transitions to all states. Transitions are not inherited.