I have a loading page while the website is loading. It works fine in Chrome but I need to fix it on Safari because it's not working. Here's my code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}
.loading {
top: 30%;
right: 45%;
position: fixed;
-webkit-animation: spinHorizontal 4s linear infinite;
-moz-animation: spinHorizontal 4s linear infinite;
animation: spinHorizontal 4s linear infinite;
}
#keyframes spinHorizontal {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png">
</div>
It appears it has to do with the position: fixed on the .se-pre-con element. Try using absolute positioning or positioning it in another way.
.se-pre-con {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffff;
}
.loading {
width: 279px;
height: 279px;
top: 30%;
right: 45%;
position: fixed;
-webkit-backface-visibility: visible;
-webkit-animation: spinHorizontal 2s linear infinite;
-moz-animation: spinHorizontal 2s linear infinite;
animation: spinHorizontal 2s linear infinite;
background-color: transparent;
}
#keyframes spinHorizontal {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png" />
</div>
</div>
Related
i followed following answer,
[https://stackoverflow.com/a/1964871/10697521][1]
and my animation is working fine, but in given example image is used to show animation,
insted of image, i want to show following css animation in center on page load,
Animation css, jsfiddle:
https://jsfiddle.net/mattii/4k7L5vj1/1/
Code:
<div class="modal">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
css:
.modal {
width: 40px;
height: 40px;
position: fixed;
animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: orange;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
#keyframes sk-chase {
100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}
Just add these css into .modal class then enjoy it! :)
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
New css:
.modal {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
position: fixed;
animation: sk-chase 2.5s infinite linear both;
}
The issue is visible when animating the skewY() property. Looks like the element's width shrinks down a little and no longer touches the sides of an equally wide container.
The same does not happen when animating with skewX() - the height is animated as expected.
I'm experiencing the bug in Safari only, both desktop and mobile browsers. Firefox and Chrome work as expected. This issue is visible during transition or animations only.
GIF previews:
Animation in Firefox/Chrome
Animation in Safari
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
Try to use browser prefix.
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
-webkit-animation: skew-x 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
-webkit-animation: skew-y 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#-webkit-keyframes skew-x {
0% { -webkit-transform: skewX(15deg) skewY(0); }
to { -webkit-transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
#-webkit-keyframes skew-y {
0% { -webkit-transform: skewX(0) skewY(15deg); }
to { -webkit-transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
I have a fixed background image within a div that will not display consistently in mobile Safari. It displays fine when a page is refreshed, but the main issue arises when I try to prompt backward and forward to other site pages, which causes the browser to reposition the background's origin point awkwardly.
Note: The first image shows the background image displaying correctly, while the second image displays the transform-origin shift that occurs upon navigating back/forward in the Safari mobile browser, (the main issue).
Here's a snippet, for further reference:
body,
html {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
body {
background: white;
margin: 0;
padding: 0;
border: 0;
outline: 0;
z-index: -2;
}
.sitebg {
background: url("http://maxpixel.freegreatpicture.com/static/photo/1x/Seamless-Repeating-Tiling-Tile-able-Tileable-1889447.jpg");
background-repeat: repeat;
background-position: center;
background-size: 720px 720px;
-webkit-animation: 180s rotatebg infinite linear;
-moz-animation: 180s rotatebg infinite linear;
-o-animation: 180s rotatebg infinite linear;
-ms-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
width: 750px;
height: 750px;
position: fixed;
top: 50%;
left: 50%;
}
.sitebg-parent {
position: absolute;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
#-webkit-keyframes rotatebg {
0% {
-webkit-transform: rotate(0deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
100% {
-webkit-transform: rotate(360deg) translate(-50%, -50%);
-webkit-transform-origin: top left;
}
}
#keyframes rotatebg {
0% {
transform: rotate(0deg) translate(-50%, -50%);
transform-origin: top left;
}
100% {
transform: rotate(360deg) translate(-50%, -50%);
transform-origin: top left;
}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
Please try the code below.
I've slightly changed your code and removed unnecessary and ivalid css rules.
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
.sitebg {
position: absolute;
top: 50%; left: 50%;
width: 2000px; height: 2000px;
margin: -1000px 0 0 -1000px;
background: url("http://s3.gomedia.us/wp-content/uploads/2008/06/skullbg-green.gif");
transform-origin: 50% 50%;
-webkit-animation: 180s rotatebg infinite linear;
animation: 180s rotatebg infinite linear;
}
.sitebg-parent {
position: absolute; z-index: -1;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#-webkit-keyframes rotatebg {
0% {-webkit-transform: rotateZ(0deg)}
100% {-webkit-transform: rotateZ(360deg)}
}
#keyframes rotatebg {
0% {transform: rotateZ(0deg)}
100% {transform: rotateZ(360deg)}
}
<body>
<div class="sitebg-parent">
<div class="sitebg"></div>
</div>
</body>
I want to spin the below image to 360 degree and below css applied on that image:
<img src="" alt="" />
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
It's working on desktop well but not on mobile? If I have done anything wrong?
This works for me both on mobile and desktop.
.loader {
position: absolute;
width: 120px;
height: 120px;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
-webkit-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Your spin code might be not working because you haven't coded that correctly. There are some issues in the #keyframes animation.
SEE THE EXAMPLE
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