I have been trying to make this animation fade and not change abruptly, any ideas?
I tried this code:
<script>
var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds
images[0] = '/includes/img/inmobg1.webp';
images[1] = '/includes/img/inmobg2.jpg';
function changePicture() {
document.getElementById('bg_static').style.backgroundImage = 'url(' + images[i] + ')';
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changePicture, slideTime);
}
window.onload = changePicture;
</script>
#bg_static{ background: #3d3d3d; background-position:bottom; background-size: cover; background-color:#000; background-repeat: no-repeat; height: 340px; width: 100%; left: 0; margin-left: 0; top: 60px; position: absolute; z-index: -1001; }
<div id="bg_static"></div>
You didn't provide enough info but i think you want something like this:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
/* The style below is just for the appearance of the example div */
.style {
width:90vw; height:90vh;
text-align:center;
padding-top:calc(50vh - 50px);
margin-left:5vw;
border:4px double #F00;
background-color:#000;
}
.style p {
color:#fff;
font-size:50px;
}
<div class="style fade-in">
<p>[content]</p>
</div>
User css animation and add animation class to that element whenever you want to animate the element.
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);
});
my target is to animate a loading spinner. After a ajax call is finished the spinner should finish the last rotation but stop than. In FF, Chrome and Opera it is working fine with just adding a class with
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
but in Safari (11.1.2) it is still running.
I think it is just something small to change but I don't find it. My idea is that safari doesn't let me change the animation while running so I can't change.
Code:
function stop()
{
document.getElementById("box").classList.add("stop");
}
CSS:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: animationRotateFrames linear 2s;
animation: animationRotateFrames linear 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
.stop
{
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
}
button
{
margin-top: 40px;
padding: 20px;
}
#-moz-keyframes animationRotateFrames{
0% {
-moz-transform: rotate(0deg) ;
}
100% {
-moz-transform: rotate(359deg) ;
}
}
#-webkit-keyframes animationRotateFrames {
0% {
-webkit-transform: rotate(0deg) ;
}
100% {
-webkit-transform: rotate(359deg) ;
}
}
#keyframes animationRotateFrames{
0% {
transform: rotate(0deg) ;
}
100% {
transform: rotate(359deg) ;
}
}
HTML
<div id="box"></div>
<button onclick="stop()">Stop</button>
Just as a demo:
JSFiddle
I have a text and block in an animation of an SVG element.
Here in my example i simplified everything.
I want to have one initial animation and afterwards a hover animation on the block element. The initial animation is fine as it is. (use chrome to have equals measurements). But after the initial animation the user should be able to hover the block and the block itself should resize (which is also working already) and the text should get an opacity of 1. But this won't work since the opacity is already set by the keyframe animation.
Any suggestions on how to work around on this one?
I don't mind if i use JS or CSS or any frameworks. I don't rely on CSS animations. Just used them because i thought i'd be cleaner.
Important Edit: I forgot a simple but very important thing. Before the animation there are some other animations on different elements. So i have a delay of let's say 2 seconds. Before the animation starts, the opacity should be 0 so the text is not visible until the animation starts. Sorry, forgot about that!
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out forwards;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>
codepen.io link (same code as above): https://codepen.io/jdickel/pen/xJbQrY
Instead of a forwards animation, you can simply set the initial opacity to 0.3.
EDIT:
I'm fairly confident that forwards animation styles can't be easily overridden (though I'm unable to find it in documentation for some reason), so you could do similarly to what was originally suggested and just extend the time of the animation like so:
.text{
font-weight: bold;
/* Start out at 0.3 */
opacity: 0.3;
transition: all .8s;
/* 2s + 3s = 5s */
animation: showText 5s ease-in-out; /* no forwards */
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
/* Note the new animation keyframe locations */
70% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text'>
Foo Bar!
</div>
<div class='block'>
</div>
First, you need to remove forwards from the .text animation. You can use Javascript's mouseenter and mouseleave events to set the text's opacity when .block is hovered over.
.text{
font-weight: bold;
opacity: 0;
transition: all .8s;
animation: showText 3s ease-in-out;
animation-delay: 2s;
}
.text:hover{
opacity: 1;
transition: all .8s;
}
.block{
top: 50px;
left: 50px;
position: absolute;
height: 20px;
width: 20px;
background-color: red;
transition: all .8s;
animation: popup 3s ease-in-out;
animation-delay: 2s;
}
.block:hover{
transform: scale(2);
transition: all .8s;
}
#keyframes showText {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
#keyframes popup {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
<div class='text' id="text" onmouseenter="function1()" onmouseleave="function2()">
Foo Bar!
</div>
<div class='block' onmouseenter="function1()" onmouseleave="function2()">
</div>
<script>
setTimeout(function(){
document.getElementById("text").style.opacity = "0.3";
}, 3000)
function function1(){
document.getElementById("text").style.opacity = "1";
}
function function2(){
document.getElementById("text").style.opacity = "0.3";
}
</script>
Code is for displaying an image during a hover.
In addition to not getting the images to display while hovering, I am getting a white border on the top (about 17px) and right side of the image.
Any suggestions as to why this is happening?
http://jsfiddle.net/wfpzLv8n/
.nav-wrap {
width: 100%;
height: 770px;
background: #111;
position: relative;
}
.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}
.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}
.nav-wrap .nav li a {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}
.nav-wrap .nav:hover li a {
opacity: 0.3;
}
.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 95px;
font-weight: 600;
}
.nav-wrap .bg1 {
background-image: url("http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg");
background-size: 120%;
opacity: 0.3;
-webkit-animation: fadein 2s forwards;
-moz-animation: fadein 2s forwards;
-ms-animation: fadein 2s forwards;
-o-animation: fadein 2s forwards;
animation: fadein 2s forwards;
-webkit-animation: mymove 11s forwards ease-out;
animation: mymove 11s forwards ease-out;
}
` #keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}
#keyframes mymove {
0% {
top: -12px;
}
100% {
top: -240px;
}
}
.nav-wrap .bg2 {
background-image: url("http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg");
background-size: 125%;
opacity: 0.4;
animation: bgani 7s linear forwards;
}
.nav-wrap .bg3 {
background-image: url("http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG");
background-size: 130%;
-webkit-animation: fadein 3s forwards ease-out;
-moz-animation: fadein 3s forwards ease-out;
-ms-animation: fadein 3s forwards ease-out;
-o-animation: fadein 3s forwards ease-out;
animation: fadein 3s forwards ease-out;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-o-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.3;
}
100% {
background-size: 125%;
}
</style>
Your jsFiddle was messed up, that's all. You shouldn't put the <style></style> tags in the CSS area, and you shouldn't put the <script></script> tags in the JavaScript area. Also, to include jQuery, you need to include it as an external resource, which is a section in the left sidebar. You put your resource URL in the text box, and click the plus button at its right. Here's a fixed version, with your HTML cleaned up too.
http://jsfiddle.net/xchrt5db/
I'm guessing you're new to jsfiddle? I've formatted it correctly now, is that working?
$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());
http://jsfiddle.net/link2twenty/wfpzLv8n/2/
I want to have this effect, but not on the whole body background but just on the border of one of my div's. ( http://jsfiddle.net/ANMPt/ )
#-webkit-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-moz-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
#-ms-keyframes blink {
0% { background:red; }
50% { background:green;}
100% { background:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
How do I target just the border?
Or: if anyone has a better solution to get an infinite loop of changing border colors in CSS or JavaScript: i am all ears :-)
Thanks!
You are applying it to the body! Do it for div
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/160/
But, if you say it is for border, do it for border-color not for background!
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div {
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 2px solid;
}
Fiddle: http://jsfiddle.net/praveenscience/ANMPt/167/
Animate border-color instead of background:
#keyframes blink {
0% { border-color: red; }
50% { border-color: green;}
100% { border-color: red; }
}
body {
border: 15px solid;
animation: blink 1s infinite;
}
Some browsers may need vendor prefixes
Demo
http://jsfiddle.net/ANMPt/162/
Change it to border-color.
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
body{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
border: 20px solid red; /* cant animate border without a border... */
height: 200px; / * for illustration purpose */
}
Apply it to the right property (border-color instead of background) and to the right element (it's better to use a class selector, so the effect can be applied to any element instead that only to divs).
Also don't forget to use (always as last) the default #keyframe syntax other than the prefixed ones.
Demo
HTML
<div class="animatedBorder"></div>
CSS
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
.animatedBorder{
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
div.animatedBorder{
margin: 20px;
width: 100px;
height: 100px;
border: 5px solid transparent;
}
The FIX is Animating border-color instead of background
But if you need to add this effect to a div
simply add a divinside the body
then change the background in css to border-color property
DEMO
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:2px solid;
width:200px;
height:200px;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
#-webkit-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-moz-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
#-ms-keyframes blink {
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
}
div{
border:solid 1px red;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}
Replace all occurrences of background with border-color and then use them on your div-element instead of the body.
You probably have to define a border for the div first (like #000000 1px solid) in order to animate it.
http://jsfiddle.net/ANMPt/165/
You need to change the style for the animation definitions:
0% { border-color:red; }
50% { border-color:green;}
100% { border-color:red; }
And define a border for your div:
#myDiv{
height: 300px;
width:300px;
border-width:5px;
border-style:solid;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
}