For some reason, my website's fading & positioning work and look great in Chrome & Firefox but Internet Explorer is not showing the fading effect at all and the alignment is all messed up. here's the coding:
/* fade slider */
.slides {
height:600px;
margin:0px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}
/* keyframes #anim_slides */
#-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
#keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name: anim_slides;
animation-duration: 24.0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
animation-delay: 18.0s;
}
.slides ul li:nth-child(5), .slides ul li:nth-child(5) div {
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;
animation-delay: 24.0s;
}
.slides ul li img {
display:block;
}
/* keyframes #anim_titles */
#-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
#-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
#keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
and you can check out the html coding for positioning by checking out the website- http://metroanimalshelter.org/
Any help here would be greatly appreciated.
You are only including the -webkit and -moz prefixed CSS properties, which will only work in webkit and mozilla browsers respectively. In every place you include the prefixes, you need to also include an unprefixed property. For example:
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
animation-delay: 6.0s;
}
It's also worth noting that this will only work in IE10 and 11. Versions of IE before that did not support CSS animations. http://caniuse.com/#feat=css-animation
I would recommend you to use autoprefixer instead set up vendor prefixes for every browser.
Less to write and easy to maintain your code
https://github.com/postcss/autoprefixer
Related
I am trying to create a simple preloader on web page but I have few mistakes.
JS code is not working.
This code should work before the web page is fully loaded and then disappear completely
Does someone know how to fix this problem or some another way or something else?
I would be grateful for any advice and any help.
function preloader() {
$(() =>{
setInterval(() => {
const p = ('.preloader');
p.css('opacity', '0');
}, 3000);
setInterval(
() => p.remove(),
parseInt(p.css('--duration')) * 1000
);
});
}
preloader();
body{
height: 100%;
width: 100%;
font-family: Verdana, sans-serif;
}
#loader-container{
min-height: 1080px;
min-width: 1920px;
z-index: 999999;
background-color: #000000;
opacity: 1;
transition: opacity .35s;
-webkit-transition: opacity .35s;
-moz-transition: opacity .35s;
-o-transition: opacity .35s;
}
#load {
position:absolute;
width:1200px;
height:36px;
left:40%;
top:40%;
margin-left:-300px;
overflow:visible;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#load div {
font-size: 90px;
position:absolute;
width:20px;
height:36px;
opacity:0;
font-family:Helvetica, Arial, sans-serif;
animation:move 2s linear infinite;
-o-animation:move 2s linear infinite;
-moz-animation:move 2s linear infinite;
-webkit-animation:move 2s linear infinite;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
color:#35C4F0;
}
#load div:nth-child(2) {
animation-delay:0.2s;
-o-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
animation-delay:0.4s;
-o-animation-delay:0.4s;
-moz-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
animation-delay:0.6s;
-o-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
animation-delay:0.8s;
-o-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
animation-delay:1s;
-o-animation-delay:1s;
-moz-animation-delay:1s;
-webkit-animation-delay:1s;
}
#load div:nth-child(7) {
animation-delay:1.2s;
-o-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-webkit-animation-delay:1.2s;
}
#keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left: 41%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
#-moz-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-moz-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
#-webkit-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
#-o-keyframes move {
0% {
left:0;
opacity:0;
}
35% {
left:41%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
65% {
left:59%;
-o-transform:rotate(0deg);
transform:rotate(0deg);
opacity:1;
}
100% {
left:100%;
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
opacity:0;
}
}
<div class="container preloader" id="loader-container">
<div id="load">
<div>G</div>
<div>N</div>
<div>I</div>
<div>D</div>
<div>A</div>
<div>O</div>
<div>L</div>
</div>
</div>
Have you included jQuery?
Do so, then something like this:
$(() => {
const p = $('.preloader');
setInterval(() => {
p.css('opacity', '0');
setInterval(() => {
p.remove();
}, 350)
}, 3000);
});
I have a piece of a code which animates text within a div. I want this whole animation to repeat in loop. It's important to keep all files internal as it's going to be a GoogleAds advert and they don't accept external links. Ideally if that can be done using CSS or plain javascript (not jquery)
Here is the code:
* {
font-family: 'Comfortaa'
}
.ad {
margin: 0 auto;
overflow: hidden;
position: relative;
color: #3a3a3a;
background: #0E6AAD;
width: 300px;
height: 250px;
background-size: 300px 250px;
}
.h1-background {
color: white;
text-align: center;
}
h1 {
font-family: 'Baloo';
position: relative;
padding: 10px;
padding-bottom: 0;
font-size: 24px;
font-weight: normal;
margin: 0;
z-index: 1;
}
h2 {
position: relative;
padding: 0 10px;
font-size: 16px;
z-index: 1;
}
<div class="ad">
<div class="h1-background">
<h1 class="slide-up-fade-in">Title
<h1>
<h2 class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
jfiddle here
Thank you for help.
I hope this is what you are expecting.
setInterval(function(){
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900);
setInterval(function(){
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000);
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
or in jsfidle : https://jsfiddle.net/hbw1uetr/22/
EDIT
If you want to loop n times you need to specify when you want to destroy the setInterval function. Tou can find the updated jsfiddle https://jsfiddle.net/hbw1uetr/59/
function setIntervalX(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function () {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
}
setIntervalX(function () {
document.getElementById("cta").classList.remove("slide-up-fade-in");
document.getElementById("cta").classList.remove("delay-1");
document.getElementById("subtitle").classList.remove("slide-up-fade-in");
document.getElementById("subtitle").classList.remove("delay-2");
document.getElementById("title").classList.remove("slide-up-fade-in");
}, 2900, 2);
setIntervalX(function () {
document.getElementById("title").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("slide-up-fade-in");
document.getElementById("subtitle").classList.add("delay-2");
document.getElementById("cta").classList.add("slide-up-fade-in");
document.getElementById("cta").classList.add("delay-1");
}, 3000, 2); //2 is the number of repition
* {
font-family:'Comfortaa'
}
.ad{
margin:0 auto;
overflow:hidden;
position:relative;
color:#3a3a3a;
background: #0E6AAD;
width:300px; height:250px;
background-size: 300px 250px;
}
.h1-background{
color:white;
text-align:center;
}
h1{
font-family:'Baloo';
position:relative;
padding:10px;
padding-bottom:0;
font-size:24px;
font-weight:normal;
margin:0;
z-index:1;
}
h2{
position:relative;
padding:0 10px;
font-size:16px;
z-index:1;
}
button{
padding:10px 20px;
font-size:12px;
background-color:#4285f4;
border:none;
color:white;
position:fixed;
cursor:pointer;
border-radius:50px;
width:180px;
left: 50%;
margin-left: -90px; /*half the width*/
z-index:9999;
top:210px;
}
.slide-up-fade-in{
animation: slide-up-fade-in ease 0.5s infinite;
animation-iteration-count: 1;
transform-origin: 50% 50%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: slide-up-fade-in ease 0.5s infinite;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
-moz-animation: slide-up-fade-in ease 0.5s infinite;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-moz-animation-fill-mode:forwards; /*FF 5+*/
-o-animation: slide-up-fade-in ease 0.5s infinite;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-o-animation-fill-mode:forwards; /*Not implemented yet*/
-ms-animation: slide-up-fade-in ease 0.5s infinite;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
-ms-animation-fill-mode:forwards; /*IE 10+*/
opacity:0;
opacity: 1\9;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
#-moz-keyframes slide-up-fade-in{
0% {
opacity:0;
-moz-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-moz-transform: translate(0px,0px) ;
}
}
#-webkit-keyframes slide-up-fade-in {
0% {
opacity:0;
-webkit-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-webkit-transform: translate(0px,0px) ;
}
}
#-o-keyframes slide-up-fade-in {
0% {
opacity:0;
-o-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-o-transform: translate(0px,0px) ;
}
}
#-ms-keyframes slide-up-fade-in {
0% {
opacity:0;
-ms-transform: translate(0px,60px) ;
}
100% {
opacity:1;
-ms-transform: translate(0px,0px) ;
}
}
<div class="ad">
<div class="h1-background">
<h1 id="title" class="slide-up-fade-in">Title<h1>
<h2 id="subtitle" class="slide-up-fade-in delay-2">subtitle subtitle subtitle</h2>
</div>
<button id="cta" class="slide-up-fade-in delay-1">
read more
</button>
</div>
try this:
.slide-up-fade-in{
animation: slide-up-fade-in ease 4s;
animation-iteration-count: infinite;
animation-delay: 0.25s;
}
.delay-1{animation-delay: 0.25s;}
.delay-2{animation-delay: 0.25s;}
I have found another way of doing this (looping 3 times):
.slide-up-fade-in{
animation: slide-up-fade-in ease 5s;
animation-iteration-count: 3;
animation-delay: 1.25s;
}
.delay-1{animation-delay: 1.25s;}
.delay-2{animation-delay: 1.5s;}
#keyframes slide-up-fade-in{
0% {
opacity:0;
transform: translate(0px,60px) ;
}
10% {
opacity:1;
transform: translate(0px,0px) ;
}
100% {
opacity:1;
transform: translate(0px,0px) ;
}
}
for looping forever, replace animation0iteration-count from 3 to infinite
I have cb-slideshow by using html and css
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3></h3></div></li>
<li><span>Image 02</span><div><h3></h3></div></li>
<li><span>Image 03</span><div><h3></h3></div></li>
<li><span>Image 04</span><div><h3></h3></div></li>
<li><span>Image 05</span><div><h3></h3></div></li>
<li><span>Image 06</span><div><h3></h3></div></li>
</ul>
But I want stop slides after 1 loop , that mean after complete 1 cycle with all the images.
the css codes are below
.cb-slideshow,
.cb-slideshow:after {
position: absolute;
width: 100%;
height: 484px;
top: 0px;
left: 0px;
z-index: 0;
overflow: hidden;
}
.cb-slideshow:after {
content: '';
background: transparent url(images/pattern.png) repeat top left;
overflow: hidden;
}
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);/** OW_Control type:color, key:slidertextColor, section:2. Colors, label: - header slider Text color **/
padding-bottom: 20px;
cursor: crosshair;
}
.cb-slideshow li:nth-child(1) span { background-image: url(images/6.jpg);/** OW_Control type:image, key:slideImage6, section: 0. Header Slides, label: Slide 6 **/ }
.cb-slideshow li:nth-child(2) span {
background-image: url(images/5.jpg);/** OW_Control type:image, key:slideImage5, section: 0. Header Slides, label: Slide 5 **/
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(images/4.jpg);/** OW_Control type:image, key:slideImage4, section: 0. Header Slides, label: Slide 4 **/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(images/3.jpg);/** OW_Control type:image, key:slideImage3, section: 0. Header Slides, label: Slide 3 **/
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(images/2.jpg);/** OW_Control type:image, key:slideImage2, section: 0. Header Slides, label: Slide 2 **/
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(images/1.jpg);/** OW_Control type:image, key:slideImage1, section: 0. Header Slides, label: Slide 1 **/
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
#-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
#media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
#media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Right now in the CSS you are setting the animation-iteration-count to infinite, so the animation is looping all the time. If you want the animation to stop the slides after one loop only, then set the value of animation-iteration-count to 1.
You would just need to change these two rules and that should do it:
.cb-slideshow li span {
width: 100%;
height: 484px;
position: absolute;
top: 15px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear 1 0s;
-moz-animation: imageAnimation 36s linear 1 0s;
-o-animation: imageAnimation 36s linear 1 0s;
-ms-animation: imageAnimation 36s linear 1 0s;
animation: imageAnimation 36s linear 1 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear 1 0s;
-moz-animation: titleAnimation 36s linear 1 0s;
-o-animation: titleAnimation 36s linear 1 0s;
-ms-animation: titleAnimation 36s linear 1 0s;
animation: titleAnimation 36s linear 1 0s;
}
My Goal:
I want to fade each Image out of a folder. The Images change every once in a while. Is that even possible due to security reasons? The Site where the Images are displayed isnt public. It is just for a Xibo Digital Signage
What I got so far:
Here is the JSFiddle
HTML:
<div id="cf4a" class="shadow">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
</div>
CSS:
#-webkit-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#cf4a img {
position:absolute;
left:0;
}
#cf4a img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#cf4a img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
A very simple solution could be to refresh the page every so often to pull the new images.
JS:
setTimeout(function(){
window.location.reload(1);
}, 5000);
Hi i am doing some animation effect using css3.It works fine in the browser.when i click button it runs only once in the webpage and i click again that button it remains same.if i want to play again,i need to refresh the page.i got some codes in the but its working.i dont know where i did mistake. this is my code kindly give some suggestions.
<script>
$('#button').click(function() {
var el = $('#div1').addClass('myfirst');
setTimeout(function() {
el.removeClass('myfirst');
}, 1000);
});
</script>
<style>
.center
{
width:960px;
height:500px;
float:left;
margin-left:100px;
margin-top:10px;
border:1px solid #ff0000;
}
.center1
{
width:780px;
height:500px;
float:left;
margin-left:80px;
margin-top:-500px;
border:1px solid #00ff00;
position:absolute;
}
.tfp{
width: 1000px;
height: 500px;
border-radius: 0%;
margin-left: -30px;
margin-top: 0px;
text-align: center;
background-image: url('tfp.jpg');
-webkit-animation-name: tfp-scale;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0.2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-name: tfp-scale;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 1s;
-moz-animation-delay: .6s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
animation-name: tfp-scale;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: .6s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-webkit-keyframes tfp-scale {
0% {
-webkit-transform: scale(2.5);
}
100% {
-webkit-transform: scale(0.8);
}
}
.div1 {
width: 100px;
height: 100px;
background: red;
float:left;
margin-left:200px;
margin-top:200px;
position: absolute;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode:forwards;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {background:red; left:0px; top:-100px; opacity:0;}
to {background:red; left:-90px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst {
from {background:red; left:0px; top:-100px;}
to {background:red; left:-90px; top:-180px;}
}
.div2
{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
float:left;
margin-left:600px;
margin-top:200px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst1;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst1 {
from {background:yellow; left:100px; top:0px;opacity:0;}
to {background:yellow; left:370px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst1 {
from {background:yellow; left:100px; top:0px; }
to {background:yellow; left:370px; top:-180px; }
}
.div3
{
width: 100px;
height: 100px;
background: green;
position: absolute;
float:left;
margin-left:0px;
margin-top:350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst2;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst2 {
from {background:green; left:450px; top:0px; opacity:0;}
to {background:green; left:110px; top:70px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst2 {
from {background:green; left:0px; top:0px;}
to {background:green; left:300px; top:-200px;}
}
.div4
{
width: 100px;
height: 100px;
background: orange;
position: relative;
float:left;
margin-left:600px;
margin-top:-350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst3;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst3 {
from {background:orange; left:0px; top:0px; opacity:0;}
to {background:orange; left:260px; top:250px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst3 {
from {background:orange; left:0px; top:0px;}
to {background:orange; left:0px; top:200px;}
}
</style>
<body>
<div class="center">
<div class="tfp">
</div>
<div class="center1"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<button id="button">play</button>
</body>
"myfirst" is not the class name, it's the animation name.
with "#div1" you're searching for the id "div1", but your elements class name is "div1" (select it with a dot: $('.div1')).
You have to execute your javascript after the dom is loaded. Currently you're searching for the id "button" before the element is loaded.
You're using jquery, so you can execute your code inside $(function(){ /* here */ }); or just move the script to the bottom.
here the animation part (Demo: http://jsfiddle.net/FirePanther/q4bedpdz/):
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<style>
.div {
width: 100px;
height: 100px;
background: red;
margin-left: 200px;
margin-top: 200px;
position: absolute;
opacity: 0;
}
.myfirst {
/* Chrome, Safari, Opera */
-webkit-animation: myfirst 1s linear;
/* Standard syntax */
animation: myfirst 1s linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {
background: red;
left: 0px;
top: -100px;
opacity: 0;
}
to {
background: red;
left: -90px;
top: -180px;
opacity: 1;
}
}
/* Standard syntax */
#keyframes myfirst {
from {
background: red;
left: 0px;
top: -100px;
opacity: 0;
}
to {
background: red;
left: -90px;
top: -180px;
opacity: 1;
}
}
</style>
</head>
<body>
<div class="div"></div>
<button id="button">play</button>
<script>
$('#button').click(function() {
var el = $('.div').addClass('myfirst');
setTimeout(function() {
el.removeClass('myfirst');
}, 1000);
});
</script>
</body>
edit:
without the opacity transition and without hiding the element after the animation: http://jsfiddle.net/FirePanther/L2pf5wku/1
If u need the animation to be infinite loop, the animation iteration count should be infinite.
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
Try this CSS
.center
{
width:960px;
height:500px;
float:left;
margin-left:100px;
margin-top:10px;
border:1px solid #ff0000;
}
.center1
{
width:780px;
height:500px;
float:left;
margin-left:80px;
margin-top:-500px;
border:1px solid #00ff00;
position:absolute;
}
.tfp{
width: 1000px;
height: 500px;
border-radius: 0%;
margin-left: -30px;
margin-top: 0px;
text-align: center;
background-image: url('tfp.jpg');
-webkit-animation-name: tfp-scale;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0.2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-name: tfp-scale;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 1s;
-moz-animation-delay: .6s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
animation-name: tfp-scale;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-delay: .6s;
animation-timing-function: ease;
animation-fill-mode: both;
}
#-webkit-keyframes tfp-scale {
0% {
-webkit-transform: scale(2.5);
}
100% {
-webkit-transform: scale(0.8);
}
}
.div1 {
width: 100px;
height: 100px;
background: red;
float:left;
margin-left:200px;
margin-top:200px;
position: absolute;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode:forwards;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes myfirst {
from {background:red; left:0px; top:-100px; opacity:0;}
to {background:red; left:-90px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst {
from {background:red; left:0px; top:-100px;}
to {background:red; left:-90px; top:-180px;}
}
.div2
{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
float:left;
margin-left:600px;
margin-top:200px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst1;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst1 {
from {background:yellow; left:100px; top:0px;opacity:0;}
to {background:yellow; left:370px; top:-180px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst1 {
from {background:yellow; left:100px; top:0px; }
to {background:yellow; left:370px; top:-180px; }
}
.div3
{
width: 100px;
height: 100px;
background: green;
position: absolute;
float:left;
margin-left:0px;
margin-top:350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst2;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst2 {
from {background:green; left:450px; top:0px; opacity:0;}
to {background:green; left:110px; top:70px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst2 {
from {background:green; left:0px; top:0px;}
to {background:green; left:300px; top:-200px;}
}
.div4
{
width: 100px;
height: 100px;
background: orange;
position: relative;
float:left;
margin-left:600px;
margin-top:-350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst3;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
#-webkit-keyframes myfirst3 {
from {background:orange; left:0px; top:0px; opacity:0;}
to {background:orange; left:260px; top:250px; opacity:1;}
}
/* Standard syntax */
#keyframes myfirst3 {
from {background:orange; left:0px; top:0px;}
to {background:orange; left:0px; top:200px;}
}