i'm trying to understand the mixing concept in the materializecss mixins found: http://materializecss.com/sass.html#mixins
I think the ones you'll need if you don't want to go to the page:
animation($args)
animation-delay($delay)
animation-direction($direction)
animation-duration($duration)
animation-fill-mode($mode)
animation-iteration-count($count)
animation-name($name)
animation-play-state($state)
animation-timing-function($function)
so say I'm using Animate.css and ngAnimate and I have the following animation:
&.ng-enter {
-webkit-animation: slideInLeft 1s;
-moz-animation: slideInLeft 1s;
-ms-animation: slideInLeft 1s;
animation: slideInLeft 1s;
}
&.ng-leave {
-webkit-animation: slideOutLeft 1s;
-moz-animation: slideOutLeft 1s;
-ms-animation: slideOutLeft 1s;
animation: slideOutLeft 1s;
}
how would this be in the mixin thingy?
Related
I made a background-image slider which works well in Chrome and Edge but not in Firefox.
In Chrome the background images changes to another image and the transition goes smooth (like it should be). But in Firefox there is no visible 'smooth' transition. The background images are changing but the transition is instant.
I already put the vendor prefix in my CSS:
-webkit-animation: hero-slider 15s infinite;
-moz-animation: hero-slider 15s infinite;
-ms-animation: hero-slider 15s infinite;
animation: hero-slider 15s infinite;
I also defined the four different animations with the prefix:
#-webkit-keyframes hero-slider
{}
#-moz-keyframes hero-slider
{}
#-ms-keyframes hero-slider
{}
#keyframes hero-slider
{}
I also tried this:
-webkit-animation: hero-slider 15s;
-moz-animation: hero-slider 15s;
-ms-animation: hero-slider 15s;
animation: hero-slider 15s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
Firefox version: 82.0.3
Chrome version: 86.0.4240.198
Edge version: 86.0.622.69
Do you have any suggestions why the transition is not smooth in Firefox?
Thanks in advance!
I would like to make a text from my div class "fadeOut" to disappear after being displayed for 2 sec.
Is there a simple way to do that with a css transition ?
$('#errMsg').append('<div class="fadeOut">Beware</div>')
Looks like you are using jQuery
try this
$('#errMsg').append('<div class="fadeOut">Beware</div>').delay(2000).fadeOut();
If you need a pure CSS solution try this
#errMsg {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
opacity:0
}
}
<div id='errMsg'>This is will hide after 5 seconds</div>
You can use the css transition property transition-delay:
.element {
transition-delay: 3s;
}
Here is a list of applicable transition properties:
/* property name | duration | timing function | delay */
transition: all 4s ease-in-out 1s;
You can read more about transition delays here:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay
I am trying to show div after 10s.
It gets success, but it is also hiding automatically.
I don't want to hide it!
I tried: http://jsfiddle.net/omarqa/fs69z2e7/
Remove opacity: 0; from class element-to-animate
New code:
.element-to-animate {
-webkit-animation: NAME-YOUR-ANIMATION 10s;
-moz-animation: NAME-YOUR-ANIMATION 10s;
-o-animation: NAME-YOUR-ANIMATION 10s;
animation: NAME-YOUR-ANIMATION 10s;
}
You have a animation, every animation has an interval.
if you want that be loop the animation you have to set
animation-iteration-count: 1;
https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp
Replace opacity value at 100% from 0 to 1 in all your keyframes.
And add animation-fill-mode: forwards property in your class .element-to-animate
.element-to-animate {
-webkit-animation: NAME-YOUR-ANIMATION 10s forwards;
-moz-animation: NAME-YOUR-ANIMATION 10s forwards;
-o-animation: NAME-YOUR-ANIMATION 10s forwards;
animation: NAME-YOUR-ANIMATION 10s forwards;
opacity:0;
}
Here's a fiddle to play with: https://jsfiddle.net/qgchhn99/
I'm trying to delay an animation as well as a transition but it doesn't work for some reason. The animation and the opacity transition runs instantly instead of waiting 4 seconds.
I got a status message which appears when a form is submitted (the classes gets added dynamically):
<p class="success success--auto-hide">Some message</p>
Then I have this animation which will hide the element after 4 seconds:
#-webkit-keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
#keyframes cssAnimation {
to {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
}
However, I also want the hiding to be smooth so I added a transition on opacity as well as the hiding animation:
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 4s;
transition-delay: 4s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation: cssAnimation 0s ease-in 4s forwards;
-moz-animation: cssAnimation 0s ease-in 4s forwards;
-o-animation: cssAnimation 0s ease-in 4s forwards;
animation: cssAnimation 0s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I'm sure I'm close to having it correct, so how should I modify it so that both the animation and transition waits 4 seconds before it executes?
With the .success--auto-hide class you've already hidden the element before the animation begins, with 'opacity: 0;'.
When you remove it, it works fine!
Also, you're giving the delay time now two times, so you can also remove the animation-delay property.
See here: http://codepen.io/anon/pen/WvKjWY
I managed to solve it by increasing the animation duration from 0s to 4s. Having it at 0 caused the hiding animation to execute instantly, thus preventing the opacity transition to run in parallel with the animation. I also decreased the opacity duration to 3s instead of 4s to allow it to be completely hidden before setting the width and height to 0, which would cause the text to jump down in an oddly fashion for a split second before it became completely hidden.
I also realised that I had already set the delay in the shorthand so I could remove the animation-delay property altogether.
.success {
color: green;
opacity: 1;
-webkit-transition-delay: 3s;
transition-delay: 3s;
-webkit-transition: opacity 4s ease-in-out;
transition: opacity 4s ease-in-out;
}
.success--auto-hide {
opacity: 0;
-webkit-animation: cssAnimation 4s ease-in 4s forwards;
-moz-animation: cssAnimation 4s ease-in 4s forwards;
-o-animation: cssAnimation 4s ease-in 4s forwards;
animation: cssAnimation 4s ease-in 4s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
I made an animation css3 however need to be run every 3 seconds infinite, unable to do only with css.
CSS3
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3 alternate;
-webkit-animation: leaves 0.3s ease-in-out 3 alternate;
}
Codepen
You are missing animation-iteration-count. The formal syntax for animation is:
animation: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>
Source + additional info
You could change it to:
.halo-robford-animate{
animation: leaves 0.3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 0.3s ease-in-out 3s infinite alternate;
-o-animation: leaves 0.3s ease-in-out 3s infinite alternate;
}
Note the measurement of 3 requires a unit, so added an s to make it 3s. The second time measurement is the animation-delay which specifies the delay in which it will start, not between animations.
Demo
Or use the properties individually:
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
If you want a 3 second gap between the animations where the animation takes 0.3s, you'll need to make a slight adjustment. Change the animation-duration to 3s (which is the 0.3s you have)
.halo-robford-animate{
animation: leaves 3s ease-in-out 3s infinite alternate;
-webkit-animation: leaves 3s ease-in-out 3s infinite alternate;
-moz-animation: leaves 3s ease-in-out 3s infinite alternate;
-o-animation: leaves 3s ease-in-out 3s infinite alternate;
}
And make animation only occur for the first 0.3s:
#-webkit-keyframes leaves {
0% {
opacity: 1;
}
5% {
opacity: 0.5;
}
10% {
opacity: 1;
}
}
Demo 2
Try and add this to your code
.halo-robford-animate{
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}