I'm trying to get this loading bar:
http://www.webfroze.com/css/loading-animation-circle-style
to repeat indefinitely.
I tried
-moz-animation:loading 1s infinite;
-webkit-animation:loading 1s infinite;
But this wont work since the animation is build up on 5 separate animated spheres which animate subsequent to one another, so setting them to repeat the infinite option messes it up
You need to add a rest in your animation, a part where nothing happens, so you can imitate delay.
css:
#layer1 { -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; }
#layer2 { -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
#layer3 { -moz-animation-delay:0.9s; -webkit-animation-delay:0.9s; }
#layer4 { -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }
#layer5 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#-moz-keyframes loading {
0%{-moz-transform:scale(0,0);}
25%{-moz-transform:scale(1,1);}
50%{-moz-transform:scale(1,1);}
75%{-moz-transform:scale(0,0);}
100%{-moz-transform:scale(0,0);}
}
#-webkit-keyframes loading {
0%{-webkit-transform:scale(0,0);}
25%{-webkit-transform:scale(1,1);}
50%{-webkit-transform:scale(1,1);}
75%{-webkit-transform:scale(0,0);}
100%{-webkit-transform:scale(0,0);}
}
Demo:
http://jsfiddle.net/Vf2aq/2/
Related
I'm creating my own utility class library similar to Tailwind CSS. I'd like to loop through a map of functions and apply those functions to every item in another map.
I'm looping through the colors, and then I'd like to loop through the transparency functions to programmatically create each class.
Here's what works:
#each $color-name, $color-value in $color-map {
.text-almost-#{$color-name} {
color: almost($color-value);
}
.text-mostly-#{$color-name} {
color: mostly($color-value);
}
.text-semi-#{$color-name} {
color: semi($color-value);
}
.text-kinda-#{$color-name} {
color: kinda($color-value);
}
.text-barely-#{$color-name} {
color: barely($color-value);
}
.text-transparent-#{$color-name} {
color: transparent($color-value);
}
}
But I'd like to consolidate it to this, because this same process is being run 10+ times throughout the file:
#each $color-name, $color-value in $color-map {
#each $opacity-name in $opacity-function-map {
.text-#{$opacity-name}-#{$color-name} {
color: $opacity-name($color-value);
}
}
}
But it's not working. $opacity-name($color-value) should be executing the transparency function on the color value. It's just outputting plain text.
So how do I programmatically run a list of functions from a map without listing out each function by name?
I have to position the image container at the top of the page, but there is no parameter.
I have found a small snippet in the docs of fancybox3, That works for me, but not for the navigation buttons. They are still in the middle of the page:
afterShow : function( instance, current, e ) {
$('.fancybox-content').css('transform','translate3d(0px, 30px, 0px)');
}
Spacing around content is controlled by CSS padding property of wrapping element. This is the default value for element containing an image:
.fancybox-slide--image {
padding: 44px 0;
}
#media all and (max-height: 576px) {
.fancybox-slide--image {
padding: 6px 0;
}
}
You can adjust that for your likening. As you can see, this gives greater flexibility that just some js option.
I'm trying to workaround Bourbon not supporting #keyframe by generating my own prefixes version with a Sass loop like this:
$list: '' -ms- -webkit- -moz- -o-
$at: # //at sign
#each $prefix in $list
#{$at}#{$prefix}keyframes moveclouds
from
#{$prefix}transform: translateX(2400px)
to
#{$prefix}transform: translateX(-400px)
and expecting to generate css:
#keyframes moveclouds from {
transform: translateX(2400px);
}
#keyframes moveclouds to {
transform: translateX(-400px);
}
#-moz-keyframes moveclouds from {
-moz-transform: translateX(2400px);
}
#-moz-keyframes moveclouds to {
-moz-transform: translateX(-400px);
}
....
the issue is that I cannot figure out how to force Sass output # (at sign) in start of a line
if I do
$at: # // wont work, error
$at: \# // will generate \#keyframes = not good
$at: "\#" // wont work error
$at: ## // will generate ##keyframes = not good
so anyone got an idea how to output at sign in Sass ?
This simply isn't possible using variable interpolation. You can get around the # assignment like this:
$at: unquote("#"); // either of these will work
$amp: #{"#"};
But then you end up with this error:
error sass/test.scss (Line 4: Invalid CSS after "": expected selector_comma_sequence, was "#-ms-keyframes ...")
Interpolation on #keyframes is not currently supported, but will be in the future. You can track the progress of that on GitHub. In the mean time, you'll have to write out your keyframe information by hand. A simple example looks like this:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
Usage:
#include keyframes(foo) {
0% {
color: red;
}
100% {
color: blue;
}
}
A more complex example can be found in Eric Meyer's Sass Animation library.
For the following SASS when class-a also has class-b then the color applied is blue.
However when the body element has class-a I would expect the color to be red, but instead this results in an error.
.class-a {
&.class-b {
color: blue;
}
&body {
color: red;
}
}
This is currently not possible.
Currently, & is syntactically the same as an element selector, so it can't appear alongside one. I think this helps clarify where it can be used; for example, foo&bar would never be a valid selector (or would perhaps be equivalent to foo& bar or foo &bar).
There is discussion to change this behavior, but it may be a long ways off before this becomes a part of Sass.
https://github.com/nex3/sass/issues/282
https://github.com/nex3/sass/issues/286
In the mean time, all you can really do is this:
.class-a {
&.class-b {
color: blue;
}
}
body.class-a {
color: red;
}
I'm using compass to generate my icons and their hover states. The active state is the same as the hover state, and I'd like to keep my sprite map from being bloated with duplicate icons. Is there any way to make it add an active class to the same coordinates as the hover state?
#import 'sprites/*.png';
#include all-sprites-sprites;
generates:
.sprites-left {
background-position: 0 -16px;
}
.sprites-left:hover, .sprites-left.left_hover, .sprites-left.left-hover {
background-position: -18px -16px;
}
I'd like to add
.sprites-left.active {
background-position: -18px -16px;
}
This is as close to a solution as I could come up with.
#import 'sprites/*.png'; // sprites to include
#include all-sprites-sprites; // creates all sprites
// Manually extend each to add active states.
.sprites-engaged.active{ #extend .sprites-engaged:hover; }
.sprites-married.active{ #extend .sprites-married:hover; }
Did you read the docs? The Selector Control section covers this:
#import 'sprites/*.png';
.sprites-left {
&:hover, &.active { #include sprites-sprite(name_for_hover) }
... etc
}