I've got the following CSS in my page css file. Crashes in the {N} css parsing code
#keyframes example
{
from { transform: translate(0, 0); }
to { transform: translate(0, 100); }
}
.session-favorite-selected
{
animation-name: example;
animation-duration: 1;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
}
Related
I followed the tutorial here and it works. How do I change the css to get slide in (when enter) and slide out (when leave).
Currently the css is like this:
.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}
.item-enter {
transform: translateX(100%);
}
.item-enter-active {
transform: translateX(0%);
transition: transform 500ms ease-in-out;
}
.item-exit {
transform: translateX(0%);
}
.item-exit-active {
transform: translateX(100%);
transition: transform 500ms ease-in-out;
}
I need help with a scss mixin. I am trying to add an animation delay using nth:child() selectors by utilizing a for loop inside a mixin. The delay on each child should increase in increments of .5 seconds.
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
&:nth-child(1) {
animation-delay: 0s;
}
&:nth-child(2) {
animation-delay: .5s;
}
&:nth-child(3) {
animation-delay: 1s;
}
&:nth-child(4) {
animation-delay: 1.5s;
}
}
I have replaced the original scss with a mixin. Please note the first child above has an animation delay of 0s.
#mixin delay {
#for $i from 1 through 4 {
&:nth-child(#{$i}) {
animation-delay: $i * (0.5s);
}
}
}
The final code.
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
#include delay;
}
This works fine except it adds a delay to the first child. How do I rewrite this mixin so it will skip the first child and begin on the second child?
You could loop from 2 to 4 (as #mfluehr said is his comment 'cause by default animation-delay is 0 => https://www.w3schools.com/cssref/css3_pr_animation-delay.asp), adding ($i - 1) to your animation-delay.
So, this could be your new mixin:
#mixin delay {
#for $i from 2 through 4 {
&:nth-child(#{$i}) {
animation-delay: ($i - 1) * (0.5s);
}
}
}
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
#include delay;
}
Your output:
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn 0.5s forwards;
}
li:nth-child(2) {
animation-delay: 0.5s;
}
li:nth-child(3) {
animation-delay: 1s;
}
li:nth-child(4) {
animation-delay: 1.5s;
}
I add also an example with new CSS without li:nth-child(1):
li {
list-style: none;
transform: translateX(100rem);
animation: slideIn .5s forwards;
}
li:nth-child(2) {
animation-delay: 0.5s;
}
li:nth-child(3) {
animation-delay: 1s;
}
li:nth-child(4) {
animation-delay: 1.5s;
}
#keyframes slideIn {
100% { transform: translateX(0); }
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
This is from the .less file that comes with the npm package rc-slider (React Slider) https://github.com/react-component/slider/blob/master/src/Range.jsx
Examples of the slider: http://react-component.github.io/slider/examples/range.html
The error
205 | .#{className}-enter, .#{className}-appear {
.motion-common() {
animation-duration: .3s;
animation-fill-mode: both;
display: block !important;
}
.make-motion(#className, #keyframeName) {
.#{className}-enter, .#{className}-appear {
.motion-common();
animation-play-state: paused;
}
.#{className}-leave {
.motion-common();
animation-play-state: paused;
}
.#{className}-enter.#{className}-enter-active, .#{className}-appear.#{className}-appear-active {
animation-name: ~"#{keyframeName}In";
animation-play-state: running;
}
.#{className}-leave.#{className}-leave-active {
animation-name: ~"#{keyframeName}Out";
animation-play-state: running;
}
}
.zoom-motion(#className, #keyframeName) {
.make-motion(#className, #keyframeName);
.#{className}-enter, .#{className}-appear {
transform: scale(0, 0); // need this by yiminghe
animation-timing-function: #ease-out-quint;
}
.#{className}-leave {
animation-timing-function: #ease-in-quint;
}
}
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
#keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
#keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
Ah I got this to work, so far only some minor lint errors on naming convention, but it's not breaking now :)
#motion-common() {
animation-duration: .3s;
animation-fill-mode: both;
display: block !important;
}
#make-motion($className, $keyframeName) {
$className {
&-enter, &-appear {
#motion-common();
animation-play-state: paused;
}
&-leave {
#motion-common();
animation-play-state: paused;
}
&-enter.&-enter-active,
&-appear.&-appear-active {
animation-name: ~"${keyframeName}In";
animation-play-state: running;
}
&-leave.&-leave-active {
animation-name: ~"${keyframeName}Out";
animation-play-state: running;
}
}
}
#zoom-motion($className, $keyframeName) {
#make-motion($className, $keyframeName);
$className {
&-enter, &-appear {
transform: scale(0, 0); // need this by yiminghe
animation-timing-function: $ease-out-quint;
}
&-leave {
animation-timing-function: $ease-in-quint;
}
}
}
#zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
#keyframes rcSliderTooltipZoomDownIn {
0% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
100% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
}
#keyframes rcSliderTooltipZoomDownOut {
0% {
transform-origin: 50% 100%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 100%;
transform: scale(0, 0);
}
}
Im working with animate.css for a bouncein-out simple animation for a login slide.
http://www.freelancing.com.br/
This is the trigger:
$('body').on('click', '.actions .login', function(){
$('#login').removeClass('bounceOutUp');
$('.overlay').fadeIn(300);
$('#login').addClass('bounceInDown');
});
$('body').on('click', '#login .close', function(){
$('#login').removeClass('bounceInDown');
$('#login').addClass('bounceOutUp');
});
and the basic css markup:
.animated {
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-transition: all 0.3s ease-in-out;
}
#-moz-keyframes bounceInDown {
0% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-moz-keyframes bounceOutUp {
0% {
-moz-transform: translateY(0);
}
20% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 0;
-moz-transform: translateY(-2000px);
}
}
I really dont know why this is rolling on at all. The markup is just the same as chrome, and it rolls just fine there.
Unlike Chrome, the transition property is applied to properties inside an animation in Firefox.
Remove the [-moz-]transition property and your CSS3 animation will work fine in both Firefox and Chrome.
ps. You're missing -moz-box-sizing: border-box; in some of your elements.
I've been having CSS3 issues, the animation works in Chrome but doesn't work in Firefox.
The CSS code:
.mwhaha {
width:100%;
height:100%;
position:fixed;
z-index:98;
background-color:rgba(0, 0, 0, .6);
animation: fade-in 2s;
-moz-animation: fade-in 2s;
-webkit-animation: fade-in 2s;
}
Animation code:
#keyframes fade-in
{
from {
opacity:0;
display:block;
}
from {
opacity:1;
display:block;
}
}
#-moz-keyframes fade-in
{
from {
opacity:0;
display:block;
}
to {
opacity:1;
display:block;
}
}
#-webkit-keyframes fade-in
{
from {
opacity:0;
display:block;
}
to {
opacity:1;
display:block;
}
}
Like i said, the code works in Chrome but doesn't work in Firefox.
I've been trying several other methods to make it work like:
#-moz-keyframes fade-in
{
from {
background-color:rgba(0, 0, 0, .0);
display:block;
}
to {
background-color:rgba(0, 0, 0, .6);
display:block;
}
}
But still no result.
I've put this in a fiddle and corrected the minor mistakes which imo did not cause a problem. The fiddle works fine in Firefox 35.0 / Mac OSX Yosemite.
http://jsfiddle.net/o3qqeL8k/
Which FF version are you using, on what OS?
#keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
.mwhaha {
width:100%;
height:100%;
position:fixed;
z-index:98;
background-color:rgba(0, 0, 0, .6);
animation: fade-in 2s;
-moz-animation: fade-in 2s;
-webkit-animation: fade-in 2s;
}
<div class="mwhaha"></div>