diff --git a/demo/css/repaintless.css b/demo/css/repaintless.css index 5c21703..1d1e256 100644 --- a/demo/css/repaintless.css +++ b/demo/css/repaintless.css @@ -429,7 +429,7 @@ -webkit-transform: rotate(-1turn); transform: rotate(-1turn); } - 50% { + 100% { -webkit-transform: none; transform: none; } @@ -440,7 +440,7 @@ -webkit-transform: rotate(-1turn); transform: rotate(-1turn); } - 50% { + 100% { -webkit-transform: none; transform: none; } diff --git a/repaintless-css/repaintless.css b/repaintless-css/repaintless.css index 5c21703..1d1e256 100644 --- a/repaintless-css/repaintless.css +++ b/repaintless-css/repaintless.css @@ -429,7 +429,7 @@ -webkit-transform: rotate(-1turn); transform: rotate(-1turn); } - 50% { + 100% { -webkit-transform: none; transform: none; } @@ -440,7 +440,7 @@ -webkit-transform: rotate(-1turn); transform: rotate(-1turn); } - 50% { + 100% { -webkit-transform: none; transform: none; } diff --git a/repaintless-css/repaintless.min.css b/repaintless-css/repaintless.min.css index 1afe93d..80faeb4 100644 --- a/repaintless-css/repaintless.min.css +++ b/repaintless-css/repaintless.min.css @@ -1 +1 @@ -.element-animated{-webkit-animation-duration:1s;animation-duration:1s}.element-animated.short{-webkit-animation-duration:.5s;animation-duration:.5s}.element-animated.long{-webkit-animation-duration:2s;animation-duration:2s}.element-animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes a{0%{-webkit-transform:translateX(200px);transform:translateX(200px)}to{-webkit-transform:none;transform:none}}@keyframes a{0%{-webkit-transform:translateX(200px);transform:translateX(200px)}to{-webkit-transform:none;transform:none}}.slide-from-right{-webkit-animation-name:a;animation-name:a}@-webkit-keyframes b{0%{-webkit-transform:translateX(-200px);transform:translateX(-200px)}to{-webkit-transform:none;transform:none}}@keyframes b{0%{-webkit-transform:translateX(-200px);transform:translateX(-200px)}to{-webkit-transform:none;transform:none}}.slide-from-left{-webkit-animation-name:b;animation-name:b}@-webkit-keyframes c{0%{-webkit-transform:translateY(-200px);transform:translateY(-200px)}to{-webkit-transform:none;transform:none}}@keyframes c{0%{-webkit-transform:translateY(-200px);transform:translateY(-200px)}to{-webkit-transform:none;transform:none}}.slide-from-top{-webkit-animation-name:c;animation-name:c}@-webkit-keyframes d{0%{-webkit-transform:translateY(200px);transform:translateY(200px)}to{-webkit-transform:none;transform:none}}@keyframes d{0%{-webkit-transform:translateY(200px);transform:translateY(200px)}to{-webkit-transform:none;transform:none}}.slide-from-bottom{-webkit-animation-name:d;animation-name:d}@-webkit-keyframes e{0%{-webkit-transform:translate(100px,100px);transform:translate(100px,100px)}to{-webkit-transform:none;transform:none}}@keyframes e{0%{-webkit-transform:translate(100px,100px);transform:translate(100px,100px)}to{-webkit-transform:none;transform:none}}.slide-from-right-bottom{-webkit-animation-name:e;animation-name:e}@-webkit-keyframes f{0%{-webkit-transform:translate(-100px,100px);transform:translate(-100px,100px)}to{-webkit-transform:none;transform:none}}@keyframes f{0%{-webkit-transform:translate(-100px,100px);transform:translate(-100px,100px)}to{-webkit-transform:none;transform:none}}.slide-from-left-bottom{-webkit-animation-name:f;animation-name:f}@-webkit-keyframes g{0%{-webkit-transform:translate(100px,-100px);transform:translate(100px,-100px)}to{-webkit-transform:none;transform:none}}@keyframes g{0%{-webkit-transform:translate(100px,-100px);transform:translate(100px,-100px)}to{-webkit-transform:none;transform:none}}.slide-from-right-top{-webkit-animation-name:g;animation-name:g}@-webkit-keyframes h{0%{-webkit-transform:translate(-100px,-100px);transform:translate(-100px,-100px)}to{-webkit-transform:none;transform:none}}@keyframes h{0%{-webkit-transform:translate(-100px,-100px);transform:translate(-100px,-100px)}to{-webkit-transform:none;transform:none}}.slide-from-left-top{-webkit-animation-name:h;animation-name:h}@-webkit-keyframes i{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100px);transform:translateX(100px)}}@keyframes i{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100px);transform:translateX(100px)}}.slide-left-right{-webkit-animation-name:i;animation-name:i;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes j{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100px);transform:translateY(100px)}}@keyframes j{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100px);transform:translateY(100px)}}.slide-top-bottom{-webkit-animation-name:j;animation-name:j;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes k{0%,20%,40%,60%,80%,to{-webkit-transform:translateX(5px);transform:translateX(5px)}10%,30%,50%,70%,90%{-webkit-transform:none;transform:none}}@keyframes k{0%,20%,40%,60%,80%,to{-webkit-transform:translateX(5px);transform:translateX(5px)}10%,30%,50%,70%,90%{-webkit-transform:none;transform:none}}.tremble{-webkit-animation-name:k;animation-name:k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes l{0%{opacity:.8}to{opacity:0}}@keyframes l{0%{opacity:.8}to{opacity:0}}.fade-out{-webkit-animation-name:l;animation-name:l}@-webkit-keyframes m{0%{opacity:0}to{opacity:.8}}@keyframes m{0%{opacity:0}to{opacity:.8}}.fade-in{-webkit-animation-name:m;animation-name:m;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes n{0%,to{opacity:.8}50%{opacity:.6}}@keyframes n{0%,to{opacity:.8}50%{opacity:.6}}.pulsate{-webkit-animation-name:n;animation-name:n;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes o{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}50%{-webkit-transform:none;transform:none}}@keyframes o{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}50%{-webkit-transform:none;transform:none}}.rotate{-webkit-animation-name:o;animation-name:o;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out} \ No newline at end of file +.element-animated{-webkit-animation-duration:1s;animation-duration:1s}.element-animated.short{-webkit-animation-duration:.5s;animation-duration:.5s}.element-animated.long{-webkit-animation-duration:2s;animation-duration:2s}.element-animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes a{0%{-webkit-transform:translateX(200px);transform:translateX(200px)}to{-webkit-transform:none;transform:none}}@keyframes a{0%{-webkit-transform:translateX(200px);transform:translateX(200px)}to{-webkit-transform:none;transform:none}}.slide-from-right{-webkit-animation-name:a;animation-name:a}@-webkit-keyframes b{0%{-webkit-transform:translateX(-200px);transform:translateX(-200px)}to{-webkit-transform:none;transform:none}}@keyframes b{0%{-webkit-transform:translateX(-200px);transform:translateX(-200px)}to{-webkit-transform:none;transform:none}}.slide-from-left{-webkit-animation-name:b;animation-name:b}@-webkit-keyframes c{0%{-webkit-transform:translateY(-200px);transform:translateY(-200px)}to{-webkit-transform:none;transform:none}}@keyframes c{0%{-webkit-transform:translateY(-200px);transform:translateY(-200px)}to{-webkit-transform:none;transform:none}}.slide-from-top{-webkit-animation-name:c;animation-name:c}@-webkit-keyframes d{0%{-webkit-transform:translateY(200px);transform:translateY(200px)}to{-webkit-transform:none;transform:none}}@keyframes d{0%{-webkit-transform:translateY(200px);transform:translateY(200px)}to{-webkit-transform:none;transform:none}}.slide-from-bottom{-webkit-animation-name:d;animation-name:d}@-webkit-keyframes e{0%{-webkit-transform:translate(100px,100px);transform:translate(100px,100px)}to{-webkit-transform:none;transform:none}}@keyframes e{0%{-webkit-transform:translate(100px,100px);transform:translate(100px,100px)}to{-webkit-transform:none;transform:none}}.slide-from-right-bottom{-webkit-animation-name:e;animation-name:e}@-webkit-keyframes f{0%{-webkit-transform:translate(-100px,100px);transform:translate(-100px,100px)}to{-webkit-transform:none;transform:none}}@keyframes f{0%{-webkit-transform:translate(-100px,100px);transform:translate(-100px,100px)}to{-webkit-transform:none;transform:none}}.slide-from-left-bottom{-webkit-animation-name:f;animation-name:f}@-webkit-keyframes g{0%{-webkit-transform:translate(100px,-100px);transform:translate(100px,-100px)}to{-webkit-transform:none;transform:none}}@keyframes g{0%{-webkit-transform:translate(100px,-100px);transform:translate(100px,-100px)}to{-webkit-transform:none;transform:none}}.slide-from-right-top{-webkit-animation-name:g;animation-name:g}@-webkit-keyframes h{0%{-webkit-transform:translate(-100px,-100px);transform:translate(-100px,-100px)}to{-webkit-transform:none;transform:none}}@keyframes h{0%{-webkit-transform:translate(-100px,-100px);transform:translate(-100px,-100px)}to{-webkit-transform:none;transform:none}}.slide-from-left-top{-webkit-animation-name:h;animation-name:h}@-webkit-keyframes i{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100px);transform:translateX(100px)}}@keyframes i{0%{-webkit-transform:translateX(-100px);transform:translateX(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateX(100px);transform:translateX(100px)}}.slide-left-right{-webkit-animation-name:i;animation-name:i;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes j{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100px);transform:translateY(100px)}}@keyframes j{0%{-webkit-transform:translateY(-100px);transform:translateY(-100px)}50%{-webkit-transform:none;transform:none}to{-webkit-transform:translateY(100px);transform:translateY(100px)}}.slide-top-bottom{-webkit-animation-name:j;animation-name:j;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes k{0%,20%,40%,60%,80%,to{-webkit-transform:translateX(5px);transform:translateX(5px)}10%,30%,50%,70%,90%{-webkit-transform:none;transform:none}}@keyframes k{0%,20%,40%,60%,80%,to{-webkit-transform:translateX(5px);transform:translateX(5px)}10%,30%,50%,70%,90%{-webkit-transform:none;transform:none}}.tremble{-webkit-animation-name:k;animation-name:k;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes l{0%{opacity:.8}to{opacity:0}}@keyframes l{0%{opacity:.8}to{opacity:0}}.fade-out{-webkit-animation-name:l;animation-name:l}@-webkit-keyframes m{0%{opacity:0}to{opacity:.8}}@keyframes m{0%{opacity:0}to{opacity:.8}}.fade-in{-webkit-animation-name:m;animation-name:m;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes n{0%,to{opacity:.8}50%{opacity:.6}}@keyframes n{0%,to{opacity:.8}50%{opacity:.6}}.pulsate{-webkit-animation-name:n;animation-name:n;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-direction:alternate;animation-direction:alternate;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes o{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:none;transform:none}}@keyframes o{0%{-webkit-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:none;transform:none}}.rotate{-webkit-animation-name:o;animation-name:o;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out} \ No newline at end of file diff --git a/repaintless-scss/animations/_rotate.scss b/repaintless-scss/animations/_rotate.scss index 379a4c2..6c7fdd8 100644 --- a/repaintless-scss/animations/_rotate.scss +++ b/repaintless-scss/animations/_rotate.scss @@ -4,7 +4,7 @@ transform: rotate(-1turn); } - 50% { + 100% { transform: none; } }