css preloader loads but not act as preloader. appears after footer

css preloader loads but not act as preloader. appears after footer - javascript

css based preloder is loads in the footer of page. not acting like preloader. seems code conflict or i missed some code. short clip of preloader https://www.awesomescreenshot.com/video/9880883?key=061bd162c59b4bcee2a76cd33f73cea3
// placed in head section of worpress
<div class="cssload-container">
<div class="cssload-item cssload-ventilator"></div>
</div>
//placed in body dection
<script>window.addEventListener("load", function () {
const cssload-container = document.querySelector(".cssload-container");
cssload-container.className += " hidden"; // class "cssload-container hidden"
}); </script>
plced in css section
.cssload-container {
position: relative;
width: 195px;
height: 224px;
overflow: hidden;
margin:0px auto;
}
.cssload-container .cssload-item {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 49px;
height: 49px;
background-color: rgb(1,1,44);
box-shadow: 0 0 8px 1px rgba(219,14,181,0.57);
}
.cssload-container .cssload-ventilator {
width: 24px;
height: 24px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
animation: cssload-spin 1.3s ease-in-out infinite reverse;
-o-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-ms-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-webkit-animation: cssload-spin 1.3s ease-in-out infinite reverse;
-moz-animation: cssload-spin 1.3s ease-in-out infinite reverse;
transition: all 0.26s ease;
-o-transition: all 0.26s ease;
-ms-transition: all 0.26s ease;
-webkit-transition: all 0.26s ease;
-moz-transition: all 0.26s ease;
}
.cssload-container .cssload-ventilator:before, .cssload-container .cssload-ventilator:after {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(219,14,181);
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-o-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-ms-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-webkit-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
-moz-box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
animation: cssload-shapeit 0.65s ease infinite alternate;
-o-animation: cssload-shapeit 0.65s ease infinite alternate;
-ms-animation: cssload-shapeit 0.65s ease infinite alternate;
-webkit-animation: cssload-shapeit 0.65s ease infinite alternate;
-moz-animation: cssload-shapeit 0.65s ease infinite alternate;
transition: all 0.26s ease;
-o-transition: all 0.26s ease;
-ms-transition: all 0.26s ease;
-webkit-transition: all 0.26s ease;
-moz-transition: all 0.26s ease;
content: '';
}
.cssload-container .cssload-ventilator:before {
left: -125%;
border-left: 2px solid rgb(1,1,44);
}
.cssload-container .cssload-ventilator:after {
right: -125%;
border-right: 2px solid rgb(1,1,44);
}
#keyframes cssload-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes cssload-spin {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes cssload-spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
#-webkit-keyframes cssload-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes cssload-spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
#keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-o-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-ms-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-webkit-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
#-moz-keyframes cssload-shapeit {
from {
border-radius: 50%;
}
to {
border-radius: 0px;
}
}
.cssload-container.hidden {
animation: fadeOut .05s;
animation-fill-mode: forwards;
}
#keyframes fadeOut {
100% {
opacity: 0;
visibility: hidden;
i am using divi theme in wordpress which allow to paste code in sections as commented.
kindly suggest the solution.

Related

How do I refresh a DIV content every 30 seconds?

I am trying to refresh a certain div to refresh every 30 seconds. There are others div's on my HTML page, but they do not need to refresh.
The idea is to reload/refresh the div itself.
I have tried this script, but can not get it to work.
Here is my HTML and Javascript code
The path in my html file is
<link rel="stylesheet" href="./difcol.css" type="text/css" media="screen">
Here are my css file for refresh.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$("refresh").load(window.location.href + " refresh");
}, 30000);
});
</script>
<div id="refresh" class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">1</h2>
<h2 class="frame-2">2</h2>
<h2 class="frame-3">3</h2>
<h2 class="frame-4">4</h2>
<h2 class="frame-5">5</h2>
<h2 class="frame-6">6</h2>
<h2 class="frame-7">
<span>a,</span>
<span>b,</span>
<span>c</span>
</h2>
</div>
</div>
#import url('https://fonts.googleapis.com/css?family=Barlow');
body {
background: #310404 url(https://i.ytimg.com/vi/wOvQAhzWCrM/maxresdefault.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Barlow', sans-serif;
}
.container {
width: 100%;
position: relative;
overflow: hidden;
}
a {
text-decoration: none;
}
h1.main, p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 90px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
font-size: 200px;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {
font-size: 200px;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h2.frame-3 {
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h2.frame-5 {
font-size: 200px;
-webkit-animation-delay: 12s;
-moz-animation-delay:12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-container h2.frame-6 {
font-size: 200px;
-webkit-animation-delay: 15s;
-moz-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
}
.sp-container h2.frame-7 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span {
-webkit-animation: blurFadeIn 3s ease-in 18s backwards;
-moz-animation: blurFadeIn 1s ease-in 18s backwards;
-ms-animation: blurFadeIn 3s ease-in 18s backwards;
animation: blurFadeIn 3s ease-in 18s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-7 span:nth-child(2) {
-webkit-animation-delay: 21s;
-moz-animation-delay: 21s;
-ms-animation-delay: 21s;
animation-delay: 21s;
}
.sp-container h2.frame-7 span:nth-child(3) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
/* background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;*/
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes fadeInBack {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 0.4;
-webkit-transform: scale(2);
}
100% {
opacity: 0.2;
-webkit-transform: scale(5);
}
}
#-webkit-keyframes fadeInRotate {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
#-moz-keyframes fadeInBack {
0% {
opacity: 0;
-moz-transform: scale(0);
}
50% {
opacity: 0.4;
-moz-transform: scale(2);
}
100% {
opacity: 0.2;
-moz-transform: scale(5);
}
}
#-moz-keyframes fadeInRotate {
0% {
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
#keyframes fadeInBack {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 0.4;
transform: scale(2);
}
100% {
opacity: 0.2;
transform: scale(5);
}
}
#keyframes fadeInRotate {
0% {
opacity: 0;
transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}

You're lacking # in $("refresh") for referring to refresh id. The change should be
$("#refresh").load(window.location.href + " refresh");
Note that I reduced the interval time to 1 second and put a log to show differences
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$("#refresh").load(window.location.href + " refresh", function() { console.log("loaded") });
}, 1000);
});
</script>
<div id="refresh" class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h2 class="frame-1">1</h2>
<h2 class="frame-2">2</h2>
<h2 class="frame-3">3</h2>
<h2 class="frame-4">4</h2>
<h2 class="frame-5">5</h2>
<h2 class="frame-6">6</h2>
<h2 class="frame-7">
<span>a,</span>
<span>b,</span>
<span>c</span>
</h2>
</div>
</div>

You can put the contents of the div in a javascript variable once the page loads
then in your set interval function:
document.getElementById('refresh').innerHTML = x; :
<head>
<script>
var x = document.getElementById('refresh').innerHTML;
setInterval(function() {
document.getElementById('refresh').innerHTML = x;
}, 30000);
</script>
</head>

Create a preloader page

I'm trying to create a preloader page for my website but i don't know how to setup it in javascript, i've create all the css but i need help to create the transiction for switch from the loader to the page.
.caricamento {
margin: 0 auto;
vertical-align: middle;
text-align: center;
display: block;
float: center;
position: absolute;
top: 45%;
left: 48%;
}
#cerchiodentro,#loading #cherchiodentro
{
display:block;
position:absolute;
margin:20px 0 0 20px;
width:40px;
height:40px;
border-top:7px solid #f22121;
border-bottom:7px solid #f22121;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
-o-border-radius:40px;
box-shadow:0 0 20px #f22121;
-webkit-box-shadow:0 0 20px #f22121;
-moz-box-shadow:0 0 20px #f22121;
-ms-box-shadow:0 0 20px #f22121;
-o-box-shadow:0 0 20px #f22121;
-webkit-animation: ccwSpin .555s linear .2s infinite;
-moz-animation: ccwSpin .555s linear .2s infinite;
-o-animation: ccwSpin .555s linear .2s infinite;
-ms-animation: ccwSpin .555s linear .2s infinite;
animation: ccwSpin .555s linear .2s infinite;
}
#loading #cerchiofuori
{
display:block;
position:absolute;
margin:0 auto;
width:80px;
height:80px;
border-top:7px solid #f22121;
border-bottom:7px solid transparent;
border-left:7px solid transparent;
border-right:7px solid 06F;
border-radius:80px;
-moz-border-radius:80px;
-webkit-border-radius:80px;
-ms-border-radius:80px;
-o-border-radius:80px;
-webkit-animation: cwSpin 1s linear .2s infinite;
-moz-animation: cwSpin .666s linear .2s infinite;
-o-animation: cwSpin .666s linear .2s infinite;
-ms-animation: cwSpin .666s linear .2s infinite;
animation: cwSpin .666s linear .2s infinite;
}
#loading #cerchiodentro
{
border-top:7px solid transparent;
border-bottom:7px solid #f22121;
border-left:7px solid #f22121;
border-right:7px solid transparent;
box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
-webkit-box-shadow:none;
}
#-webkit-keyframes cwSpin
{
0%{-webkit-transform:rotate(0deg); }
100%{-webkit-transform:rotate(360deg); }
}
#-moz-keyframes cwSpin
{
0%{-moz-transform:rotate(0deg); }
100%{-moz-transform:rotate(360deg); }
}
#-ms-keyframes cwSpin
{
0%{-ms-transform:rotate(0deg); }
100%{-ms-transform:rotate(360deg); }
}
#-o-keyframes cwSpin
{
0%{-o-transform:rotate(0deg); }
100%{-o-transform:rotate(360deg); }
}
#keyframes cwSpin
{
0%{transform:rotate(0deg); }
100%{transform:rotate(360deg); }
}
#-webkit-keyframes ccwSpin
{
0%{-webkit-transform:rotate(0deg); }
100%{-webkit-transform:rotate(-360deg); }
}
#-moz-keyframes ccwSpin
{
0%{-moz-transform:rotate(0deg); }
100%{-moz-transform:rotate(-360deg); }
}
#-ms-keyframes ccwSpin
{
0%{-ms-transform:rotate(0deg); }
100%{-ms-transform:rotate(-360deg); }
}
#-o-keyframes ccwSpin
{
0%{-o-transform:rotate(0deg); }
100%{-o-transform:rotate(-360deg); }
}
#keyframes ccwSpin
{
0%{transform:rotate(0deg); }
100%{transform:rotate(-360deg); }
}
<div class="caricamento">
<span id="loading">
<span id="cerchiofuori"></span>
<span id="cerchiodentro"></span>
</span>
</div>
For the javascript i found this but i don't know how to adapt this to my page, some one can help me please?
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);
});
^^^ This code is wrong but this is what i found
Thanks for all the answer

you can use $('.caricamento').hide() to hide the loader in setTimeout() after 3 seconds.
$(document).ready(function() {
setTimeout(function(){
$('.caricamento').hide();
}, 3000);
});
.caricamento {
margin: 0 auto;
vertical-align: middle;
text-align: center;
display: block;
float: center;
position: absolute;
top: 45%;
left: 48%;
}
#cerchiodentro,#loading #cherchiodentro
{
display:block;
position:absolute;
margin:20px 0 0 20px;
width:40px;
height:40px;
border-top:7px solid #f22121;
border-bottom:7px solid #f22121;
border-left:7px solid transparent;
border-right:7px solid transparent;
border-radius:40px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-ms-border-radius:40px;
-o-border-radius:40px;
box-shadow:0 0 20px #f22121;
-webkit-box-shadow:0 0 20px #f22121;
-moz-box-shadow:0 0 20px #f22121;
-ms-box-shadow:0 0 20px #f22121;
-o-box-shadow:0 0 20px #f22121;
-webkit-animation: ccwSpin .555s linear .2s infinite;
-moz-animation: ccwSpin .555s linear .2s infinite;
-o-animation: ccwSpin .555s linear .2s infinite;
-ms-animation: ccwSpin .555s linear .2s infinite;
animation: ccwSpin .555s linear .2s infinite;
}
#loading #cerchiofuori
{
display:block;
position:absolute;
margin:0 auto;
width:80px;
height:80px;
border-top:7px solid #f22121;
border-bottom:7px solid transparent;
border-left:7px solid transparent;
border-right:7px solid 06F;
border-radius:80px;
-moz-border-radius:80px;
-webkit-border-radius:80px;
-ms-border-radius:80px;
-o-border-radius:80px;
-webkit-animation: cwSpin 1s linear .2s infinite;
-moz-animation: cwSpin .666s linear .2s infinite;
-o-animation: cwSpin .666s linear .2s infinite;
-ms-animation: cwSpin .666s linear .2s infinite;
animation: cwSpin .666s linear .2s infinite;
}
#loading #cerchiodentro
{
border-top:7px solid transparent;
border-bottom:7px solid #f22121;
border-left:7px solid #f22121;
border-right:7px solid transparent;
box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
-webkit-box-shadow:none;
}
#-webkit-keyframes cwSpin
{
0%{-webkit-transform:rotate(0deg); }
100%{-webkit-transform:rotate(360deg); }
}
#-moz-keyframes cwSpin
{
0%{-moz-transform:rotate(0deg); }
100%{-moz-transform:rotate(360deg); }
}
#-ms-keyframes cwSpin
{
0%{-ms-transform:rotate(0deg); }
100%{-ms-transform:rotate(360deg); }
}
#-o-keyframes cwSpin
{
0%{-o-transform:rotate(0deg); }
100%{-o-transform:rotate(360deg); }
}
#keyframes cwSpin
{
0%{transform:rotate(0deg); }
100%{transform:rotate(360deg); }
}
#-webkit-keyframes ccwSpin
{
0%{-webkit-transform:rotate(0deg); }
100%{-webkit-transform:rotate(-360deg); }
}
#-moz-keyframes ccwSpin
{
0%{-moz-transform:rotate(0deg); }
100%{-moz-transform:rotate(-360deg); }
}
#-ms-keyframes ccwSpin
{
0%{-ms-transform:rotate(0deg); }
100%{-ms-transform:rotate(-360deg); }
}
#-o-keyframes ccwSpin
{
0%{-o-transform:rotate(0deg); }
100%{-o-transform:rotate(-360deg); }
}
#keyframes ccwSpin
{
0%{transform:rotate(0deg); }
100%{transform:rotate(-360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caricamento">
<span id="loading">
<span id="cerchiofuori"></span>
<span id="cerchiodentro"></span>
</span>
</div>

You can use the document.onreadystatechange event. When it is triggered just check the status, when it is complete the page is loaded, follow the code:
document.onreadystatechange = function () {
if (document.readyState == "loading") {
//action while loading
}else if(document.readyState == "complete") {
//action when page is loaded
//this hide the .caraicamento after page is loaded and with a delay of 1-second
$('.caricamento').delay(1000).hide('slow');
}
}
This is the best way to know if the page has been loaded, but can be used along with a delay so the animation has a minimum time on the screen!

You can use .delay() and one of jQuery animation methods, for example, .fadeOut(). Note, .loaded is not defined at CSS.
$(function() {
$(".caricamento").delay(3000).fadeOut("slow")
})
.caricamento {
margin: 0 auto;
vertical-align: middle;
text-align: center;
display: block;
float: center;
position: absolute;
top: 45%;
left: 48%;
}
#cerchiodentro,
#loading #cherchiodentro {
display: block;
position: absolute;
margin: 20px 0 0 20px;
width: 40px;
height: 40px;
border-top: 7px solid #f22121;
border-bottom: 7px solid #f22121;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
box-shadow: 0 0 20px #f22121;
-webkit-box-shadow: 0 0 20px #f22121;
-moz-box-shadow: 0 0 20px #f22121;
-ms-box-shadow: 0 0 20px #f22121;
-o-box-shadow: 0 0 20px #f22121;
-webkit-animation: ccwSpin .555s linear .2s infinite;
-moz-animation: ccwSpin .555s linear .2s infinite;
-o-animation: ccwSpin .555s linear .2s infinite;
-ms-animation: ccwSpin .555s linear .2s infinite;
animation: ccwSpin .555s linear .2s infinite;
}
#loading #cerchiofuori {
display: block;
position: absolute;
margin: 0 auto;
width: 80px;
height: 80px;
border-top: 7px solid #f22121;
border-bottom: 7px solid transparent;
border-left: 7px solid transparent;
border-right: 7px solid 06F;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
-ms-border-radius: 80px;
-o-border-radius: 80px;
-webkit-animation: cwSpin 1s linear .2s infinite;
-moz-animation: cwSpin .666s linear .2s infinite;
-o-animation: cwSpin .666s linear .2s infinite;
-ms-animation: cwSpin .666s linear .2s infinite;
animation: cwSpin .666s linear .2s infinite;
}
#loading #cerchiodentro {
border-top: 7px solid transparent;
border-bottom: 7px solid #f22121;
border-left: 7px solid #f22121;
border-right: 7px solid transparent;
box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
-webkit-box-shadow: none;
}
#-webkit-keyframes cwSpin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes cwSpin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-ms-keyframes cwSpin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
#-o-keyframes cwSpin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#keyframes cwSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#-webkit-keyframes ccwSpin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
#-moz-keyframes ccwSpin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-360deg);
}
}
#-ms-keyframes ccwSpin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(-360deg);
}
}
#-o-keyframes ccwSpin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(-360deg);
}
}
#keyframes ccwSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="caricamento">
<span id="loading">
<span id="cerchiofuori"></span>
<span id="cerchiodentro"></span>
</span>
</div>

Changing a css animation so that it automatically runs after a specific time

Is it possible using JavaScript to make the animation run automatically and stay changed (ie not resetting) after say 2 seconds?
I've tried using the following:
element.style.WebkitAnimationPlayState = "paused";
and
element.style.WebkitAnimationPlayState = "running";
However it did not work. Any other suggestions appreciated.
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin:hover {
color: #0eb7da;
}
.spin::before, .spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
}
.spin:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
border: 0 solid transparent;
}
.spin:hover::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}
button::before, button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
<button class="spin circle">spin circle</button>

Replace your :hover selectors with an additional active class and with a little javascript you should be good:
document.addEventListener('DOMContentLoaded', function() {
var button = document.querySelector('.spin');
setTimeout(function() {
button.className += ' active';
}, 2000);
});
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin::before, .spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
}
.spin::after {
border: 0 solid transparent;
}
.spin.active {
color: #0eb7da;
}
.spin.active::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin.active::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before, .circle::after {
border-radius: 100%;
}
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}
button::before, button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
<button class="spin circle">spin circle</button>

Rather than using the :hover state you could use javascript to add a class (say, .active) and replace the .spin:hover css with .spin.active
Here's a jQuery example:
$('button').on('click', function() {
$(this).addClass('active');
});
Here's an example fiddle that might help do what you want: https://jsfiddle.net/en53matp/1/

In CSS, you can set a hudge delay to freeze alike the animation on the defaut state (not :hover).
.spin {
width: 5em;
height: 5em;
padding: 0;
}
.spin:hover {
color: #0eb7da;
}
.spin::before,
.spin::after {
top: 0;
left: 0;
}
.spin::before {
border: 2px solid transparent;
transition-delay: 99999s
}
.spin:hover::before {
border-top-color: #0eb7da;
border-right-color: #0eb7da;
border-bottom-color: #0eb7da;
-webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
border: 0 solid transparent;
transition-delay: 99999s
}
.spin:hover::after {
border-top: 2px solid #0eb7da;
border-left-width: 2px;
border-right-width: 2px;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}
.circle {
border-radius: 100%;
box-shadow: none;
}
.circle::before,
.circle::after {
border-radius: 100%;
}
button {
background: none;
border: 0;
box-sizing: border-box;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
margin: 1em;
padding: 1em 2em;
text-align: center;
text-transform: capitalize;
position: relative;
vertical-align: middle;
}
button::before,
button::after {
box-sizing: border-box;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
<button class="spin circle">spin circle</button>
.spin::before {
border: 2px solid transparent;
transition-delay: 99999s/* whatever you think long enough to hold the transition to be back to initial state */
}
.spin::after {
border: 0 solid transparent;
transition-delay: 99999s
}
https://jsfiddle.net/en53matp/3/

Looking to achieve rectangle radial wipe animation reveal

I'm working on a full-width hero animation that would reveal an image/HTML div in a radial wipe manner. Here's what I have thus far: http://jsfiddle.net/andrewkerr/bjqSv/ - (code below) which is largely based these pieces:http://codepen.io/tmyg/pen/bwLom and http://css-tricks.com/css-pie-timer/ - The issue I'm running into is the fact that the image tiles because the animation splits the "pie" in half - I'm looking to perform the effect without having the image tile. I'm not opposed to a Javascript solution. Thanks.
//html
<div class="spinner-new">
<span><em></em></span>
<span><em></em></span>
</div>
//css
.spinner-new {
width: 100%;
height: 400px;
margin: 0 auto;
position: relative;
background:#3f9e35;
overflow:hidden
}
.spinner-new span em {
background-image:url('http://cdn.acidcow.com/pics/20100707/funny_family_photos_04.jpg');
-webkit-animation-delay:1s;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes rotate-rt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
#-webkit-keyframes rotate-lt {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(180deg); }
75% { -webkit-transform: rotate(180deg); }
100% { -webkit-transform: rotate(180deg); }
}
.spinner-new {
position: relative;
}
.spinner-new span {
width: 50%;
height: 400%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
left: 0;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.spinner-new span:first-child em {
left: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-animation-name: rotate-lt;
-webkit-transform-origin: 0 12.5%;
}
.spinner-new span:last-child em {
left: -100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-animation-name: rotate-rt;
-webkit-transform-origin: 100% 12.5%;
}

That is my solution.
CSS
#-webkit-keyframes span-left {
0% { right: 0%; }
24.999% { right: 0%;}
25% { right: 50%;}
100% { right: 50%;}
}
#-webkit-keyframes rotate-first {
0% { right: 100%;
-webkit-transform: rotate(0deg);
-webkit-transform-origin: right center; }
24.999% { right: 100%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
25% { right: 0%;
-webkit-transform: rotate(180deg);
-webkit-transform-origin: right center; }
50% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
100% { right: 0%;
-webkit-transform: rotate(360deg);
-webkit-transform-origin: right center; }
}
#-webkit-keyframes rotate-last {
0% { -webkit-transform: rotate(0deg); opacity: 0; }
24.999% { -webkit-transform: rotate(180deg); opacity: 0;}
25% { -webkit-transform: rotate(180deg); opacity: 1;}
50% { -webkit-transform: rotate(360deg); opacity: 1; }
100% { -webkit-transform: rotate(360deg); opacity: 1;}
}
.spinner-new {
width: 400px;
height: 300px;
position: relative;
overflow:hidden;
position: relative;
left: 50px;
top: 20px;
}
.spinner-new span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
}
.spinner-new span:first-child {
right: 50%;
}
.spinner-new span:last-child {
left: 50%;
}
.spinner-new span em {
position: absolute;
width: 100%;
height: 100%;
}
.spinner-new span em,
.spinner-new span:first-child {
-webkit-animation-duration: 30s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.spinner-new span:first-child {
-webkit-animation-name: span-left;
}
.spinner-new span:first-child em {
-webkit-animation-name: rotate-first;
overflow: hidden;
}
.spinner-new span:last-child em {
left: 0;
-webkit-animation-name: rotate-last;
-webkit-transform-origin: left center;
-webkit-transform: rotate(204deg);
}
.spinner-new span em:after {
content: "";
position: absolute;
width: 200%;
height: 100%;
top: 0px;
background-image:url('image.jpg');
background-size: cover;
}
.spinner-new span:first-child em:after {
left: 0px;
}
.spinner-new span:last-child em:after {
right: 0px;
}
The most complex issue is reusing the splitted left element for the right hand beginning.
I have to move the container to the left in the middle of the animation.
The background image is set with cover, and all the size are in percentages, so this solution should be fully responsive
fiddle
The demo has the iteration count to infinite, so it is easier to see it going on.

May not be the most elegant way to accomplish this, but I ended up using CSS animations to reveal pie pieces gradually. Here's a link to the working example: http://jsfiddle.net/andrewkerr/dsTm6/ - code below
//html
<div class="wrapper">
<div class="headline">Some really cool supporting text</div>
<div class='shutter-1 first' style="left:400px;top:0px;"></div>
<div class='shutter-2 fourth' style="left:400px;top:400px;"></div>
<div class='shutter-1a third' style="left:400px;top:400px;"></div>
<div class='shutter-3 seventh' style="left:0px;top:0px"></div>
<div class='shutter second' style="left:400px;top:0px;"></div>
<div class='shutter-2a sixth' style="left:0px;top:400px;"></div>
<div class='shutter fifth' style="left:0px;top:400px;"></div>
<div class='shutter-3a eighth' style="left:0px;top:0px"></div>
</div>
//css
.wrapper {
position:relative;
background-image:url('main.jpg');
width:800px;
height:800px;
margin:0px auto;
}
.shutter
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-1a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-bottom: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-2a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-right;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-right-width: 400px;
border-right-style: solid;
border-right-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-top;150px solid transparent;
border-left: 400px solid #e7e7e7;
text-indent: -9999px;
border-top-width: 400px;
border-top-style: solid;
border-top-color: transparent;
-webkit-transform:rotate(360deg);
}
.shutter-3a
{
position: absolute;
width: 0;
height: 0;
width: 0px;
height: 0px;
border-left;150px solid transparent;
border-top: 400px solid #e7e7e7;
text-indent: -9999px;
border-left-width: 400px;
border-left-style: solid;
border-left-color: transparent;
-webkit-transform:rotate(360deg);
}
#keyframes first
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-moz-keyframes first /* Firefox */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
#-webkit-keyframes first /* Safari and Chrome */
{
from {opacity: 1.0 ;}
to {opacity: 0.0;}
}
#-o-keyframes first /* Opera */
{
from {opacity: 1.0;}
to {opacity: 0.0;}
}
.first
{
animation: first 1s;
animation-delay: .08s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: .08s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: .08s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: .08s;
-o-animation-fill-mode: forwards;
}
.second
{
animation: first 1s;
animation-delay: 1.0s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1s;
-o-animation-fill-mode: forwards;
}
.third
{
animation: first 1s;
animation-delay: 1.05s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.05s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.05s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.05s;
-o-animation-fill-mode: forwards;
}
.fourth
{
animation: first 1s;
animation-delay: 1.2s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.2s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay:1.2s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.2s;
-o-animation-fill-mode: forwards;
}
.fifth
{
animation: first 1s;
animation-delay: 1.4s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.4s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.4s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.4s;
-o-animation-fill-mode: forwards;
}
.sixth
{
animation: first 1s;
animation-delay: 1.5s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.5s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 1.5s;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.5s;
-o-animation-fill-mode: forwards;
}
.seventh
{
animation: first 1s;
animation-delay: 1.6s;
animation-fill-mode: forwards;
-moz-animation: first 1s; /* Firefox */
-moz-animation-delay: 1.6s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.6s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 1s; /* Opera */
-o-animation-delay: 1.6s;
-o-animation-fill-mode: forwards;
}
.eighth
{
animation: first 2s;
animation-delay: 1.7s;
animation-fill-mode: forwards;
-moz-animation: first 2s; /* Firefox */
-moz-animation-delay: 1.7s;
-moz-animation-fill-mode: forwards;
-webkit-animation: first 1s ease-in-out; /* Safari and Chrome */
-webkit-animation-delay: 1.7s;
-webkit-animation-fill-mode: forwards;
-o-animation: first 2s; /* Opera */
-o-animation-delay: 1.7s;
-o-animation-fill-mode: forwards;
}
.headline {
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size:36px;
text-align: center;
color:#fff;
padding-top:300px;
width:300px;
margin: 0 auto;
}

Circle mask in css when zooming

I would like to use this zooming effect on a project of mine
http://tympanus.net/Tutorials/OriginalHoverEffects/index10.html
I am using an image shaped as a circle (png) . I tried to make the containing div circular using border radius
.view {
width: 132px;
height: 132px;
margin-left: 20px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
-moz-border-radius: 66px;
-webkit-border-radius:66px;
-khtml-border-radius:66px;
border-radius: 66px;
cursor: default;
}
.view .mask,.view .content {
width: 132px;
height: 132px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
.view-tenth img {
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth h2 {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
background: transparent;
margin: 20px 40px 0px 40px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
color: #333;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth p {
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.5s linear;
}
.view-tenth a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.view-tenth:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.view-tenth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
but when the image zoom, it shows rectangular margin. Any help on how to mask as a circle would be much appreciated!

.view: hover {
-moz-transform: scaleX(2);
-o-transform: scaleX(2);
-ms-transform: scaleX(2);
-webkit-transform: scaleX(2);
transform: scaleX(2);
}
Here, the image/images with the classname view gets scaled 2X every time user hovers over the same.

Try use percentges (%) instead of pixels (px).
-moz-border-radius: 25%;
-webkit-border-radius:25%;
-khtml-border-radius:25%;
border-radius: 25%;

Develop Reference

JavaScript is the programming language of the Web.

css preloader loads but not act as preloader. appears after footer - javascript

Related

How do I refresh a DIV content every 30 seconds?

Create a preloader page

Changing a css animation so that it automatically runs after a specific time

Looking to achieve rectangle radial wipe animation reveal

Circle mask in css when zooming

Categories

Resources