Can I sum up some time values in CSS? - css

:) First of all - sory for my English. Second of all - I have an issue or puzzle.
I want to make animation spans with relation time between them. There is the simple code:
span.one { transition: transform 1s ease-out; } /*duration 1s delay 0s*/
span.two { transition: transform 1s ease-out 1s; } /*duration 1s delay 1s*/
span.three { transition: transform 1s ease-out 2s; } /*duration 1s delay 2s*/
So each span appear one by one and it's look ok. Every next element is animated in delay of value duration (let's get name 'time-op'). So if I change values from second to my class 'time-op' it will be like:
span.one { transition: transform time-op ease-out time-op*0; }
span.two { transition: transform time-op ease-out time-op*1; }
span.three { transition: transform time-op ease-out time-op*2; }
If I root my 'time-op' by :root at the beginning of my file, can I multiply this value as I described it above? For example:
span.three { transition: transform var(--time-op) ease-out var(--time-op)*2; }
I know this is available in JavaScript, but maybe there is a way in ONLY CSS :)

Use calc() function in CSS:
span.one { transition: transform time-op ease-out calc(time-op * 0) }

Related

Flip image after load for 1 second using css

I am using CSS & HTML to flip the image on hover, but how can I flip image for 1 second after loading?
You can set a keyframe animation on a 1-second delay. The forwards makes sure the style from the animation is kept.
.flip {
animation: flip-animation .25s 1s forwards;
-webkit-animation: flip-animation .25s 1s forwards; /* for less modern browsers */
}
#keyframes flip-animation {
// code to flip the
from {}
to{}
}

Multiple transitions with scss

I have a multiple transition problem with scss #mixin.
Im trying to create dynamic transition #mixin with 1-5 different properties. When I'm processing the code below this error shows up:
Error: Mixin transition takes 1 argument but 3 were passed.
on line 758 of style.scss, in `transition'
from line 758 of style.scss Use --trace for backtrace.
This is my code:
#mixin:
#mixin transition($x){
transition: $x;
-webkit-transition: $x;
-moz-transition: $x;
-ms-transition: $x;
-o-transition: $x;
}
#include:
#include transition(visibility 0s ease 0.2s, opacity 0.2s ease, transform 0.3s ease);
I figured it out with this hack but it looks like a very unclean solution to me:
#include transition(visibility 0s ease 0.2s + "," + opacity 0.2s ease + "," + transform 0.3s ease);
Is there a better way to do it?
In your mixin, you have declared a single variable $x as a parameter which means that sass expects the mixin to be called with one argument.
#include transition(visibility 0s ease 0.2s)
When you pass the mixin comma separated values, it causes an error because sass sees these as multiple values instead of a single value which it expects.
#include transition(visibility 0s ease 0.2s, opacity 0.2s ease) //Sees two args instead of one arg
In Sass, comma separated values can be interpreted as a single value if declared as varargs. Varargs are mixin or function parameters declared with 3 dots appended to their name.
Replacing your $x parameter with $x... will ensure that sass interprets the comma separated arguments passed to your mixin as one value.
#mixin transition($x...){
-webkit-transition: $x;
-moz-transition: $x;
-ms-transition: $x;
-o-transition: $x;
transition: $x;
}
It can then be used like this
div {
#include transition(color 1s, background-color 1s, border-color 1s);
}
which compiles to
div {
-webkit-transition: color 1s, background-color 1s, border-color 1s;
-moz-transition: color 1s, background-color 1s, border-color 1s;
-ms-transition: color 1s, background-color 1s, border-color 1s;
-o-transition: color 1s, background-color 1s, border-color 1s;
transition: color 1s, background-color 1s, border-color 1s;
}
By doing this you can pass the values as you normally would in CSS without the hack you are currently using making it much cleaner.
Hope this helps
Since this is the first result on Google, I want to say that this does not solve my problem. I wanted to transition multiple properties, with only one mixin. I came up with this solution: (see link for helper functions)
/*
usage: #include transition(prop1, prop2, ..., 0.5s cubic-bezier(0.16, 0.85, 0.45, 1));
*/
#mixin transition($args...) {
$type: nth($args, length($args));
$props: remove-nth($args, length($args));
$result: ();
#for $i from 1 through length($props) {
$prop: nth($props, $i);
$result: append($result, $prop);
$result: append($result, $type);
#if $i != length($props) {
$result: append($result, unquote($string: ","));
}
}
#include simple_transition($result);
}
I created a short mixin that allows adding multiple transition properties in one declaration. In case number of arguments provided for the timing, easing or delay, is less than number of transition properties, the arguments are repeated.
#mixin transition($prop, $time, $easing: $ease1, $delay: 0s) {
$transition: ();
#for $i from 1 through length($prop) {
#for $j from 0 to (length($prop)) - (length($time)) {
$time: join($time, nth($time, -1));
}
#for $j from 0 to (length($prop)) - (length($easing)) {
$easing: join($easing, nth($easing, -1));
}
#for $j from 0 to (length($prop)) - (length($delay)) {
$delay: join($delay, nth($delay, -1));
}
$transition: append(
$transition,
(nth($prop, $i) nth($time, $i) nth($easing, $i) nth($delay, $i)),
$separator: comma
);
}
transition: $transition;
}
//scss input:
#include transition(height width transform, 0.2s 0.3s, linear, 0s);
//css output:
transition: height 0.2s linear 0s, width 0.3s linear 0s, transform 0.3s linear 0s;
Where time and easing are the same, but with multiple properties:
#mixin transitionPrefixMultiple($time, $properties...) {
$transition: ();
#each $property in $properties {
$transition: append(
$transition, ($property $time cubic-bezier(.42, 0, .58, 1)), $separator: comma
);
}
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
Usage:
#include transitionPrefixMultiple(150ms, width, background-color, etc);
Thank you #nidhishs06 as this is a cleaner version of your answer

What does animation:none do exactly?

I've got an HTML element here with this starting style:
transition: transform 2s;
First, it is animated (it rotatesX) via a class that is added on click. On the next click, another class is added that adds a transform3d that should move the element vertically and this should take 2 seconds as per the rule above.
The transform3d doesn't take effect unless I add this rule to the element: animation: none as well. I am confused on what animation: none actually does. Are there complications with transforming an element that has had an animation applied to it?
animation: none sets all animate-* properties to their initial value:
animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
The problem is that your element has an animation which affects its transform property. Therefore, when you modify its static transform, you don't see the change because it's overridden by the animation.
Then, if you remove the animation, you see the change in transform.
This is unrelated to transforms, it would happen with any property, like color:
div {
animation: color-anim 1s infinite;
}
#keyframes color-anim {
from { color: red }
to { color: blue }
}
<div>Lorem ipsum</div>
<button onclick="document.querySelector('div').style.color = '#fff'">Make white</button>
<button onclick="document.querySelector('div').style.animation = 'none'">Remove animation</button>

Blur out an image then back to normal state

I'm seeing if there is a way to blur out your background for a few seconds then have it come into view. I was trying to play around with the blur attribute and the transition attribute but I was not getting the results I was getting. I tried something like this on my css
body{
background:black;
-webkit-filter: blur(10px);
}
.body{
margin:0 auto;
width:95%;`enter code here`
clear:both;
transition:body 2s ease-in-out;
}
Any suggestions?
Presumably you don't have a class named "body" so the period in your second selector is an error. Also, you have the syntax wrong for transition. The first value is the property to transition, not a selector. And, depending on the level of support you require, you need vendor prefixes on both the transition property and the property being transitioned, e.g.
body {
-webkit-transition: -webkit-filter 2s ease-in-out;
}
BTW, I'm not sure if -filter is an animatable property.
Fiddle: http://jsfiddle.net/Bushwazi/sHL9m/3/
1) Use all in the transition
2) Despite what the prefixes lead you to believe, this didn't work in all browsers
3) But it did work the same for backgrounds and img
I change a class using javascript, css handles the rest.
.filter {
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(10px);
-o-filter:blur(10px);
-ms-filter:blur(10px);
-webkit-transition: all 5.0s linear 1.0s;
-moz-transition: all 5.0s linear 1.0s;
-ms-transition: all 5.0s linear 1.0s;
-o-transition: all 5.0s linear 1.0s;
transition: all 5.0s linear 1.0s;
}
.filter.animae {
filter:blur(0px);
-webkit-filter:blur(0px);
-moz-filter:blur(0px);
-o-filter:blur(0px);
-ms-filter:blur(0px);
}
.bg {
display:inline-block;
width:360px;
height:424px;
background:url(http://gruntjs.com/img/grunt-logo.svg);
}

CSS animation, is it possible to loop between multiple elements?

I want to use the advantage of the css animation ability of doing infinite action to control the child I target each time in a different value THEN at some point go back to the zero and so.
Lets say I want to color the background of a group of 3 DIVs, So the CSS code will be:
<style>
div:nth-of-type(1){
-webkit-animation:coloring 2s infinite;
}
#-webkit-keyframes coloring{
from {background:red;}
to {background:yellow;}
}
<style>
So as long as I used infinite property it will go forever and here I want to increase the value of nth-of-type each time in a row (1,2,3) then when reaching the 3 it will back to 1
Very interesting question. But i don't think CSS support a loop function.
:nth-of-type() can calculate different index but the results will be disabled as one array selection:
:nth-of-type(0,1,2,3). This doesn't support any iteration, all the elements will be selected at once.
This is however possible in javascript/jQuery, as it supports iterations:
var count = 0;
var delay = 0;
$('div').each(function()
{
$('div:eq(' + count +')').delay(delay)
.queue(function()
{
$(this).css('background', 'yellow');
})
count++;
delay += 500;
})
It will iterate every div element. Whith the .eq() selector, every element based on the index value will be selected, this way every element is selected one by one.
Normally this would excecute in seconds, so you wouldn't see the effect of "one-by-one".
I used a delay() to have a delay on the selector, where the delay will be increased at every iteration. In this case after every half second a new .queue() will be added so the each function will not iterate before the queue has been finished.
combined this with the css transition to get the fade-in effect:
transition: background 2s;
-webkit-transition: background 2s; /* Safari */
jsFiddle
Try this:
HTML:
<div class="div active"></div>
<div class="div"></div>
<div class="div"></div>
CSS:
.active {
-webkit-animation:coloring 3s;
}
JS:
var len = $(".div").length;
setTimeout(function () {
change_bg();
},3000);
function change_bg() {
var index = $(".active").index(); // get index of active div
var current;
$(".active").removeClass("active");
if (index == len - 1) { // check if active div is last
current = 0; // if last then start from first
} else {
current = index + 1; // increment otherwise
}
$(".div:eq(" + current + ")").addClass("active"); //change background of next div
setTimeout(function () { //recursive calling
change_bg();
},3000);
}
Fiddle here.
I was reviewing my questions and I wanted to share a different approach to achieve this with pure CSS:
#keyframes coloring {
0% {
background:red;
}
25% {
background:yellow;
}
33% {
background:#ccc;
}
75% {
background:#ccc;
}
100%{
background:#ccc;
}
}
.div {
height:50px;
background:#ccc;
}
.first {
-webkit-animation:coloring 9s ease-out 0s infinite;
animation:coloring 9s ease-out 0s infinite;
-moz-animation:coloring 9s ease-out 0s infinite;
-webkit-animation:coloring 9s ease-out 0s infinite;
}
.second {
-webkit-animation:coloring 9s ease-out 3s infinite;
animation:coloring 9s ease-out 3s infinite;
-moz-animation:coloring 9s ease-out 3s infinite;
-webkit-animation:coloring 9s ease-out 3s infinite;
}
.third {
-webkit-animation:coloring 9s ease-out 6s infinite;
animation:coloring 9s ease-out 6s infinite;
-moz-animation:coloring 9s ease-out 6s infinite;
-webkit-animation:coloring 9s ease-out 6s infinite;
}
<div class="div first"></div>
<div class="div second"></div>
<div class="div third"></div>

Resources