I have a client who wants this exact keyframes animation to be migrated from their old website, except we want it to infinitely loop. I know that I can create a brand new slideshow from a JS array, but I was wondering if a preprocessor like Sass would enable me to just loop this thing the way it is. I appreciate any input.
#keyframes slidySlidesFadeInOut {
0% {
opacity:1;
}
8% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slidySlides {
position:relative;
height:301px;
width:318px;
margin:0 auto;
}
#slidySlides img {
position:absolute;
animation-name: slidySlidesFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 180s;
}
#slidySlides img:nth-of-type(1) {
animation-delay: 150s;
}
#slidySlides img:nth-of-type(2) {
animation-delay: 120s;
}
#slidySlides img:nth-of-type(3) {
animation-delay: 90s;
}
#slidySlides img:nth-of-type(4) {
animation-delay: 50s;
}
#slidySlides img:nth-of-type(5) {
animation-delay: 15s;
}
#slidySlides img:nth-of-type(6) {
animation-delay: 0;
}
If you just want the animation to loop add this to style:
animation-iteration-count:infinite;
Or replace the animation name with:
animation: slidySlidesFadeInOut 180s infinite;
And this does not require SASS, although it is completely valid in SASS.
Related
I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.
.slide.ng-enter{
transition-duration: 500ms;
transform: translateX(100%);
}
.slide.ng-enter-active{
transform: translateX(0%);
}
.slide.ng-leave{
transition-duration: 500ms;
transform: translateX(0%);
}
.slide.ng-leave-active{
transform: translateX(-100%);
}
I also need to make the page one slide from left to right.Can someone help me on this
I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.
.slide {
top: 0;
position: absolute;
width: 100%;
}
https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview
I have used ngAnimateSwap to translate elements horizontally, vertically. However are other types of animations supported, such as opacity (fade-in and fade-out?)
When I modify the example that appears here animateSwap to use opacity instead of the top value, then the animation does not occur. Is this expected?
I was able to get it working using opacity. You have to play around with the css and understand what css element does what. Here's a plunkr of animateSwap being used with an opacity transition.
The original css is:
.swap-animation.ng-enter {
top:-250px;
}
.swap-animation.ng-enter-active {
top:0px;
}
.swap-animation.ng-leave {
top:0px;
}
.swap-animation.ng-leave-active {
top:250px;
}
I changed that to the following and I now have a crossfade working just fine:
.swap-animation.ng-enter {
top:0px;
opacity:0;
}
.swap-animation.ng-enter-active {
top:0px;
opacity:1;
}
.swap-animation.ng-leave {
top:0px;
opacity:1;
}
.swap-animation.ng-leave-active {
top:0px;
opacity:0;
}
I've been trying to get a sequence of two animations running but I'm getting really annoyed as I just can't make it work! I need to fade a div in and then slide it to the right. Fade in is easy using:
.fadein.ng-hide-remove {
animation: 0.8s appear;
display: block!important;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
#keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
and
<div id="settings" ng-show="settingsPanel" class="fadein"></div>
and
$scope.showSettings = function(){
$scope.settingsPanel = true;
}
Settings looks like this:
#settings {
background:#353734;
position:fixed;
top:0;
bottom:0;
left:-280px;
width:500px;
z-index:100;
}
I've completed sliding too in a similar way but to get them to trigger one after the other is proving impossible for me. Could someone show me how to do this please?
How about using keyframes as follows:
#settings {
background:#353734;
position:fixed;
top:25px;
bottom:0;
left:0px;
width:200px;
z-index:100;
}
.fadein.ng-hide-remove {
animation: 2.8s appear;
display: block!important;
}
#keyframes appear {
0% {
left: -100px;
opacity: 0;
}
50% {
left: -100px;
opacity: 1;
}
100% {
left: 0;
opacity: 1;
}
}
See working fiddle here:
http://jsfiddle.net/HB7LU/20650/
Why not set keyframes up for animations and simply set different stages for each animation. Bit like this
#keyframes slide-right {
0% {
left: -450px;
}
100% {
left: 0;
}
}
I have used the example on
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I am able to get the animations to work. But I would like to ONLY have the leave animation. Is there a way to do it? I have tried to get rid of the .repeat-item.ng-enter in my css, unfortunately did not work. Any insights?
Thanks!
My Javascript:
<tr ng-repeat="item in m.itemList" class="repeat-item">
My CSS:
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
}
My updated CSS:
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave{
opacity:1;
}
In my updated CSS, I got rid of anything related to ng-enter but still got the animation for entering.
For me It's working !
here is a working example
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave{
opacity:1;
}
I've got something working (animation) but it doesn't look pretty.
When the animation/slide is triggered. The "leaving" slide pops to the left of the screen and hugs the "entering" slide.
It also overshoots the endpoint during animation then snaps back. My ng-animate css is as follows:
css :
.slide-leave, .slide-enter {
-webkit-transition: 5s linear all; /* Safari/Chrome */
-moz-transition: 5s linear all; /* Firefox */
-o-transition: 5s linear all; /* Opera */
transition: 5s linear all; /* IE10+ and Future Browsers */
/* The animation preparation code */
opacity: 0.5;
}
.slide-enter {
position: relative;
left: -100%;
}
.slide-enter.slide-enter-active {
left: 0;
opacity: 1;
}
.slide-leave {
opacity: 1;
}
.slide-leave.slide-leave-active {
position: relative;
opacity: 0;
left: 100%;
}
Here's a semi-working plunkr. Notice the "leaving" view hugs the "entering" view. You can get the animation started by pressing the black square in the header.
http://plnkr.co/edit/FG44cpJ65S4Gr6QZpm1X?p=preview