i would like to do a reusable sass function that makes it easy for me to write a #keyframes css animation without writing too much code but I'm not sure how to go about it, especially the math part.
i have a div containing a single background image with this css
height: 100vh;
width: 8000px;
this background image is composed of 25 frames. so each frame is 320px wide.
the animation should translateX() the div by multiple of 320px every 4%, so something like this:
#keyframes animation {
0% {
transform:translateX(0);
}
4% {
transform:translateX(-320px);
}
8% {
transform:translateX(-640px);
}
...
}
i would like to make a function of this but I'm new to scss functions and i really don't know where to start. if someone could give me a hint that would be great!
thanks
Could be better (modularise) but here is for you;
#mixin deneme($i){
#for $i from 0 through 100/$i {
#{$i * 4}% {
transform:translateX(#{-320 * $i});
}
}
}
UPDATE:
I think this one is a bit better.
#mixin deneme($increase, $angle){
#for $x from 0 through 100/$increase {
#{$x * $increase }% {
transform:translateX($angle * $x);
}
}
}
Related
Am I misunderstanding the capabilities of css variables? I am trying to pass a background image url to a variable like this: It seems to be working fine when I pass something simple like a color etc...
:root {
--slide-1: url(/static/images/slideshow/slide1.jpg) ;
--slide-2: url(/static/images/slideshow/slide2.jpg) ;
--slide-3: url(/static/images/slideshow/slide3.jpg) ;
--slide-4: url(/static/images/slideshow/slide4.jpg) ;
--slide-5: url(/static/images/slideshow/slide5.jpg) ;
}
//and then
.jumbotron > .jumbotron-slideshow:nth-child(1) {
background-image: var(--slide-1);
}
.jumbotron > .jumbotron-slideshow:nth-child(2) {
animation-delay: 6s;
background-image: var(--slide-2);
}
.jumbotron > .jumbotron-slideshow:nth-child(3) {
animation-delay: 12s;
background-image: var(--slide-3);
}
.jumbotron > .jumbotron-slideshow:nth-child(4) {
animation-delay: 18s;
background-image: var(--slide-4);
}
.jumbotron > .jumbotron-slideshow:nth-child(5) {
animation-delay: 24s;
background-image: var(--slide-5);
}
This is a bug in Chrome, the code works fine in Firefox.
You'll have to stick with absolute URLs in var() for now.
This was a bug, but it works now. 🎉
-- SCSS version --
In my case we were already using SCSS and needed to do exactly as OP!
SCSS helps to reduce repetitive code, which is easier to look at and great if in the future we need to add or remove slides for example.
You could go a step further and have JS pass you the number of slides as a CSS variable..
..but for this example we'll stick to OP's number of 5 slides and hardcode into SCSS like so:
#for $i from 1 through 5 {
:root { --slide-#{$i}: url(/static/images/slideshow/slide#{$i}.jpg); }
//and then
.jumbotron > .jumbotron-slideshow:nth-child(#{$i}) {
animation-delay: #{($i - 1) * 6}s;
background-image: var(--slide-#{$i});
}
}
I am trying to make a seamless animation so teh svg just continues to act like rain in a continous loop. The problem is the animation resets and you can tell. I would like to do this with CSS3 animations. Is the possible?
Full code is in codepen below
#sprinkles { position:absolute; height:100%; width:100%; }
#sprinkles .sprinkle { animation:rainSprinkles .85s linear infinite }
#sprinkles .sprinkle.white { fill:$white; }
#sprinkles .sprinkle.blue { fill:$blue; }
#sprinkles .sprinkle.yellow { fill:$yellow; }
#sprinkles .sprinkle.pink { fill:$hot-pink; }
#keyframes rainSprinkles {
0% {
transform: translateY(-100%);
}
100% {
visibility: hidden;
transform: translateY(1000%);
}
}
Codepen Below:
http://codepen.io/Jesders88/pen/bBYQom
The simplest way is to make your sprinkles be taller than the screen. Now when you move them down more come onto the screen.
Here's a demo.
I've made one change from your example. Instead of having four identical squares of sprinkles, I've taken just one of the four and turned it into a pattern That way the SVG repeats it for you and you can fill any area you want with a continuous pattern of sprinkles.
Then I have made a rectangle that is as wide as the screen and has a height equal to (svgHeight + patternHeight). I start it at -patternHeight off the top of the screen, then animate it down the distance of one patternHeight (487).
#rainRect {
animation: rainSprinkles 2s linear infinite;
}
#keyframes rainSprinkles {
from {
transform: translateY(0px);
}
to {
transform: translateY(487px);
}
}
We move it one patternHeight exactly so that it appears continuous when it jumps back up again to start another loop of the animation.
I begun to use the LESS library exactly 2 hours ago.
( Time counted AFTER a successfull kind of a Hello World )
My LESS style sheet works.
Here is how I call it in my page:
<!-- LESS CSS -->
<link rel="stylesheet/less" type="text/css" href="myLessCssStyle.less" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.js"></script>
I made the equivalent of a Hello world on a single CSS value easy to verify:
#testDisplay: none;
#bigVisibleElement{
display: #testDisplay;
}
Success!
Happy about that, since it was almost too easy...
I started to implement this serious variable handling advantage in a small test style sheet I was working on.
And here is where i'm stucked:
/* my LESS vars definition */
#Bes_ease_in_finish: 10%;
#Bes_ease_out_begin: 80%;
#Bes_ease_out_finish: 90%;
/* A couple more lines that includes other working LESS vars... */
/* This is bugging here. On the first LESS var. */
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#Bes_ease_in_finish { opacity: 1; } /* <--- Line 75 is here. */
#Bes_ease_out_begin { opacity: 1; animation-timing-function: ease-out; }
#Bes_ease_out_finish { opacity: 0; }
100% { opacity: 0 }
}
I defined all other prefix variants of #keyframes (-webkit-, -moz-, -o-, -ms-).
That isn't the problem.
Here is the error I get in console:
«Unrecognised input».
Arrrg... What ?!?
Can't use a LESS vars on these animation timing ?
Why?
Or HOW?
Is there a syntax trick ?
These timing values repeat 5 times FOR EACH animation because of these sickening prefixes... And this is a really simple #keyframes animation (fade in / fade out timing of a couple images) that I obviously wish to get more complex in the future.
THIS is the reason why I looked for LESS library.
Take you time... I wish to have a clear explicative answer.
Or some reference links to read.
My house isn't on fire.
Try this:
#keyframes KeyFrame_Bes_Web {
0% { opacity: 0; animation-timing-function: ease_in; }
#{Bes_ease_in_finish} { opacity: 1; } /* <--- Line 75 is here. */
#{Bes_ease_out_begin} { opacity: 1; animation-timing-function: ease-out; }
#{Bes_ease_out_finish} { opacity: 0; }
100% { opacity: 0 }
}
Instead of #variable you should use #{variable} when using dynamic directives. (is directive the right word? dunno)
how to write Less mixin for keyframes.
I have tried in the following way but it is giving error,
ParseError: Directive options not recognized.
.keyFrameAlert(#-webkit-keyframes);
Mixin
.keyFrameAlert(#keyFrame){
#keyFrame alert {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 0;
}
}
}
can anybody help on this issue.
I think it might be throwing an error because of the # prefix for your keyframes, so where your passing #-webkit-keyframes it thinks your trying to pass it a variable with that same name.
There is a slightly different approach to this, where you can declare your keyframes, and add a class inside it which contains your keyframe set.
#-webkit-keyframes alert {.keyframes;}
#keyframes alert {.keyframes;}
.keyframes () {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 0;
}
}
This is slightly different to what you were trying previously, as you would still need to type out all of your vendor prefixes, but you only need to change your keyframes in one place.
I'm attempting to perform a CSS animation, where a number of images are cycled through. I appreciate that normally one would use a sprite (and doing so works with this code), however as I wish to use this animation in iBooks, I have to keep to a 2 million pixel limit on each image, so instead I'm using separate images. So I'm attempting to use the following CSS, but to no success:
#sprite {
width: 200px;
height: 170px;
background:url('../Images/monkey1small.png') 0 0;
-webkit-animation-duration:4000ms;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-webkit-animation-name:animate01;
-webkit-animation-direction:forward;
-moz-animation-duration:1ms;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:step-start;
-moz-animation-name:animate01;
}
#-webkit-keyframes animate01 {
0% { background:url('../Images/monkey1small.png') 0 0; }
20% { background:url('../Images/monkey2small.png') 0 0; }
40% { background:url('../Images/monkey3small.png') 0 0; }
60% { background:url('../Images/monkey4small.png') 0 0; }
80% { background:url('../Images/monkey5small.png') 0 0; }
100% { background:url('../Images/monkey1small.png') 0 0; }
}
#-moz-keyframes animate01 {
0% { background:url('../Images/monkey1small.png') 0 0; }
20% { background:url('../Images/monkey2small.png') 0 0; }
40% { background:url('../Images/monkey3small.png') 0 0; }
60% { background:url('../Images/monkey4small.png') 0 0; }
80% { background:url('../Images/monkey5small.png') 0 0; }
100% { background:url('../Images/monkey1small.png') 0 0; }
}
It is called with a simple div:
At the moment it just statically displays the first image. I can add other css properties to the frames and it will animate those properties, however trying to change the background url as shown in the code above, does not work. Any suggestions?
What you posted works fine in Chrome and Safari (http://jsfiddle.net/4rAer/) but doesn't do a thing in Firefox. Where it dies in Firefox is the inclusion of a background image. You can animate background in Firefox - but only background colour. But if this is just for iBooks that shouldn't matter. I'm assuming the animation doesn't work in iBooks either.
This fiddle has a filmstrip that should have better support. It does require some additional HTML but I animating the Top property has broad support. http://jsfiddle.net/4rAer/1/
see here:
http://chrismar.sh/2011/07/19/animating-sprites-using-css/
Do not animate the background-image property, do the background-position one!