I have the following CSS Plunker Example:
#-webkit-keyframes ngdialog-fadeout {
0% {opacity: 1;}
100% {opacity: 0; }
}
#keyframes ngdialog-fadeout {
0% {opacity: 1;}
100% {opacity: 0; }
}
.ngdialog.ngdialog-closing .ngdialog-overlay {
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadeout 0.5s;
animation: ngdialog-fadeout 0.5s;
}
.ngdialog.ngdialog-closing .ngdialog-content {
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadeout 0.5s;
animation: ngdialog-fadeout 0.5s;
}
I do not want to use animation. So I tried the following:
.ngdialog.ngdialog-closing .ngdialog-overlay {
visibility: hidden;
}
.ngdialog.ngdialog-closing .ngdialog-content {
visibility: hidden;
}
I am able to hide it but after doing it every link on the page is non reactive like something is over it ...
What am I missing?
UPDATE
I tried the following:
.ngdialog {
bottom: 0;
left: 0;
overflow: auto;
position: fixed;
right: 0;
top: 0;
z-index: 10000;
-webkit-overflow-scrolling: touch;
}
.ngdialog-overlay {
background-color: black;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
opacity: 0.6;
z-index: 100000;
}
.ngdialog.ngdialog-closing .ngdialog-overlay {
opacity: 0;
visibility: hidden;
}
.ngdialog-content {
background: white;
}
.ngdialog.ngdialog-closing .ngdialog-content {
opacity: 0;
visibility: hidden;
}
The same problem happens ...
Best way that I could find to "disable" animations from ngDialog is actually to speed them up so that they won't be visible anymore.
.ngdialog * {
-webkit-animation-duration: 0.01s !important;
-moz-animation-duration: 0.01s !important;
-o-animation-duration: 0.01s !important;
-ms-animation-duration: 0.01s !important;
animation-duration: 0.01s !important;
}
Related
Loading icon not spinning in the iOS version > 15.3 or 16.1 but it is working fine in the lower < 15 iOS version iphone and ipad and Android, browser.
Please find the below css code for reference. i have tried with webkit for safari and also tried with transform: rotate(-360deg). but spinner is not spinning/rotating in the iOS device alone. could you please confirm what we can change from our end.
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
/* spinner Wrapper */
.Wrapperspinner{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9999;
line-height: 30px;
margin-left: 0;
margin-top: 0;
text-align: center;
color: #fff;
padding-top: 7px;
background-color: rgba(250, 250, 250, 0.8);
opacity: 0.8;
display: none;
}
.loading {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 110px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%)
}
/* Spinning circle (inner circle) */
.loading .maskedCircle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #ff6969;
}
/* Spinning circle mask */
.loading .mask {
width: 25px;
height: 25px;
overflow: hidden;
margin: -3px;
}
/*waiting text*/
.loading .spinnerWaitingText {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
/* Spinner */
.loading .spinner {
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
animation-name: spin;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
border-radius: 50%;
border: 3px solid #12779a;
}
div.tc-screenMask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000;
opacity: 0.3;
display: none;
}
.SpinnerStep1,
.SpinnerStep2,
.SpinnerStep3{
opacity: 0;
text-align: center;
position: absolute;
width: 100%;
}
.SpinnerContainer{
position: fixed;
top: calc(50% + 90px);
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
min-width: 300px;
visibility: hidden;
}
.SpinnerStep1 {
animation-name: fadeInOut1;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut1;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep2 {
animation-name: fadeInOut2;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: 1;
-webkit-animation-name: fadeInOut2;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.SpinnerStep3 {
animation-name: fadeInOut3;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-name: fadeInOut3;
-webkit-animation-duration: 9s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeInOut1 {
0% { opacity: 0 }
1% { opacity: 1 }
95% {opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut2 {
0% { opacity: 0 }
50% { opacity: 0 }
51% { opacity : 1}
95% { opacity: 1 }
100% { opacity: 0 }
}
#keyframes fadeInOut3 {
0% { opacity: 0 }
66% { opacity: 0 }
67% { opacity: 1 }
100% { opacity: 1 }
}
#-webkit-keyframes fadeInOut1 {
0% { -webkit-opacity: 0 }
1% { -webkit-opacity: 1 }
95% {-webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut2 {
0% { -webkit-opacity: 0 }
50% { -webkit-opacity: 0 }
51% { -webkit-opacity : 1}
95% { -webkit-opacity: 1 }
100% { -webkit-opacity: 0 }
}
#-webkit-keyframes fadeInOut3 {
0% { -webkit-opacity: 0 }
66% { -webkit-opacity: 0 }
67% { -webkit-opacity: 1 }
100% { -webkit-opacity: 1 }
}
.angSpinner.Wrapperspinner {
background-color: #fff;
opacity: 0.9;
display: block;
visibility: hidden;
}
.angSpinner .loading {
width: 148px;
height: 148px;
}
.angSpinner .loading .spinner {
border: none;
width: 148px;
height: 148px;
animation-name: spin;
animation-duration: .8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-name: spin;
-webkit-animation-duration: .8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.angSpinner .loading .maskedCircle {
border: 4px solid #005900;
width: 140px;
height: 140px;
margin: 0;
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
.angSpinner .loading .mask {
width: 148px;
height: 35px;
margin: 0;
}
please find the below HTML and Js code for reference. other animation text is for fade out in above css3 defined - delay. css3 code shared above for your reference. i have tried with above approach but sorry it is not working.
<div id="Wrapper" class="Wrapperspinner"
aria-label="Loading page now">
<div class="loading">
<!-- We make this div spin -->
<div class="spinner">
<!-- Mask of the quarter of circle -->
<div class="mask">
<!-- Inner masked circle -->
<div class="maskedCircle"></div>
</div>
</div>
<div class="loginSpinnerContainer" aria-hidden="true" tabindex="-1">
<div class="boi_label SpinnerStep1">
Contacting to server...
</div>
<div class="boi_label SpinnerStep2">
Authenticating your application...
</div>
<div class="boi_label SpinnerStep3">
Running security checks...
</div>
</div>
<div class="boi_label spinnerWaitingText" aria-hidden="true" tabindex="-1">please wait</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
SLoader.setup({
id: 'WRAPPER',
showMask: 'WRAPPER.CREATE_MASK',
delay: '5'
});
$(document).ready(function() {
SLoader.triggerHide();
$('.main-form').attr('aria-hidden', 'false');
});
Hi.addHook('beforeSubmit', showSpinnerOnSubmit);
Hi.addHook('beforeAjaxButtonActionService', showSpinnerForAjaxButton);
Hi.addHook('postProcessResponse', SLoader.triggerHide);
function showSpinnerOnSubmit(){
$('#WRAPPER$').attr({'role': 'alert', 'aria-live': 'assertive'});
$('.main-form').attr('aria-hidden', 'true');
SLoader.triggerShow();
}
function showLoginSpinner(){
$('.loginSpinnerContainer').css('visibility', 'visible');
$('.spinnerWaitingText').hide();
$('#WRAPPER$').addClass('customSpinner');
}
function showSpinnerForAjaxButton() {
if(document.activeElement.classList.contains('showSpinner_ajaxbutton')) {
SLoader.triggerShowAjax();
}
}
//]]>
</script>
This is my css
#snackbar {
float: bottom;
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #009688;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
right: 5%;
top: 10%;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 10%; opacity: 1;}
}
#keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 10%; opacity: 1;}
}
#-webkit-keyframes fadeout {
from {top: 10%; opacity: 1;}
to {top: 0; opacity: 0;}
}
#keyframes fadeout {
from {top: 10%; opacity: 1;}
to {top: 0; opacity: 0;}
}
Is that possible to change all top values from typescript i need to give top value from html using #Input and is that possible to replace css "top" with css "bottom" by using angular 2?
You need to use ngClass:
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
I think there is no other ways.
Read more about ngClass here: https://angular.io/api/common/NgClass
I've tried everything from adding extra keyframes (0%, 1%, 100% or 0%, 99%, 100%) to setting -webkit-animation-fill-mode to forwards to the oft-mentioned -webkit-backface-visibility: hidden; trick mentioned in other threads, but I'm still seeing a flicker in my css keyframe animation at the start of almost every animation iteration in Safari 7 (both desktop and iOS). Chrome seems to be flicker-free.
JSBin: http://jsbin.com/julor/2/edit
HTML:
<div class="ripple"></div>
CSS:
body {
background-color: #90CBEA;
}
.ripple, .ripple:before, .ripple:after {
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .15) 100%);
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
.ripple:before, .ripple:after {
content: '';
display: block;
}
.ripple {
-webkit-animation-name: innerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
&:before {
-webkit-animation-name: ripple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
&:after {
-webkit-animation-name: outerRipple;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-out;
}
}
#-webkit-keyframes innerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 200px;
width: 200px;
opacity: 0;
}
}
#-webkit-keyframes ripple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 300px;
width: 300px;
opacity: 0;
}
}
#-webkit-keyframes outerRipple {
from {
height: 0px;
width: 0px;
opacity: 1;
}
to {
height: 340px;
width: 340px;
opacity: 0;
}
}
Adding a frame in between a little earlier than at 99% made the flickering disappear on Safari! (Safari 8 OS X)
#-webkit-keyframes innerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 200px; width: 200px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes ripple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 300px; width: 300px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
#-webkit-keyframes outerRipple {
0% { height: 0px; width: 0px; opacity: 1; }
95% { height: 340px; width: 340px; opacity: 0; }
100% { width: 0px; height: 0px; opacity: 0; }
}
Html5:
<div id="slideshow">
<div id='animate-area'>
</div>
</div>
Css:
body {
margin: 0;
padding: 0;
}
#slideshow {
position: relative;
overflow: hidden;
height: 145px;
}
#animate-area {
height: 100%;
width: 2538px;
position: absolute;
left: 0;
top: 0;
background-image: url('../img/banner.png');
animation: animatedBackground 40s 5s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 30s linear infinite;
}
/* Put your css in here */
#keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-webkit-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
#-moz-keyframes animatedBackground {
from { left: 0; }
to { left: -1269px; }
}
JSfiddle:
jsfiddle.net/cz04c4nx/1
Using this image, I need show like, http://jsfiddle.net/5pVr4/6/. I tried, but for my particular image url('../img/banner.png') when run in localhost, can't able to get.
I think i solved your problem. You can use this code and it may be help you.I edited that code which you can make similar animate background image.
CSS Code:
#-webkit-keyframes MOVE-BG {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-550px);
}
}
#content {
height: 100px;
text-align: center;
font-size: 26px;
color: white;
position: relative;
overflow: hidden;
}
.bg{
position: absolute;
left: 0;
right: -550px;
top: 0;
bottom: 0;
background: url(http://s30.postimg.org/qnju89rkx/banner.png) 0% 0% repeat;
z-index: -1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
Live Working Demo
It's my first time experimenting with css3 animations and I have a question regarding the following setup:
Link to codepen
After item3 the animation rewinds to item1. I wonder if it's possible to let follow the item1 after the item3 without this rewinding, so that item3 also moves to the top and item1 slides in from the bottom again, and so on and on?
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
CSS
#change {
overflow: hidden;
height: 58px;
color: black;
font-size: 3em;
}
#change span {
position: relative;
display: block;
animation: myAnim 10s ease infinite 0s;
-webkit-animation: myAnim 10s ease infinite 0s;
}
#keyframes myAnim {
0% { top: 0px; }
20% { top: 0px; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: 0px; }
}
#-webkit-keyframes myAnim {
0% { top: 0px; }
20% { top: 0px; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: 0px; }
}
Unfortunately, there doesn't seem to be an easy way to do this. If we were using an image, you could easily just take advantage of repeat and force the beginning of the element to start at the end of the element. However, since we aren't using an image, the only solution I can think of would be to use the first element as the last element.
UPDATED EXAMPLE HERE
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
<span>item1</span> <!-- The first element is used as the last element-->
</div>
Modified CSS
#-webkit-keyframes myAnim {
0% { top: 0; }
20% { top: 0; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: -172px; }
}
it didn't let me rest, so i figured out another solution. with no doubled item1, but the missing part in this is that it doesn't start with the item1 being already there at the beginning.
Link to codepen
HTML
<div id="change">
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
CSS
#change {
overflow: hidden;
height: 58px;
color: black;
font-size: 3em;
position: relative;
}
#change span {
position: absolute;
display: block;
animation: myAnim 9s ease infinite 0s;
-webkit-animation: myAnim 9s ease infinite 0s;
}
#change span:nth-of-type(2) {
animation-delay: 3s;
-webkit-animation-delay: 3s;
top: 58px;
}
#change span:nth-of-type(3) {
animation-delay: 6s;
-webkit-animation-delay: 6s;
top: 58px;
}
#keyframes myAnim {
0% { top: 58px; }
15% { top: 0px; }
33% { top: 0px; }
48% { top: -58px; opacity:1; }
60% { top: -58px; opacity: 0; }
80% { top: 58px; opacity: 0; }
100% { top: 58px; opacity: 1; }
}
#-webkit-keyframes myAnim {
0% { top: 58px; }
15% { top: 0px; }
33% { top: 0px; }
48% { top: -58px; opacity:1; }
60% { top: -58px; opacity: 0; }
80% { top: 58px; opacity: 0; }
100% { top: 58px; opacity: 1; }
}