The animation happens perfectly, images not blurred etc. But when it finishes, image is blurred and stays like that. The browser I am testing is Chrome, but regardless of browser, it happens. All the images used in blink animation are not scalet, they are shown as in their original size. Here's my CSS:
#charset "UTF-8";
#-webkit-keyframes blink {
0% {
opacity:0;
}
11%, 22% {
opacity:1;
}
33%, 100% {
opacity:0;
}
}
#-moz-keyframes blink {
0% {
opacity:0;
}
11%, 22% {
opacity:1;
}
33%, 100% {
opacity:0;
}
}
#-o-keyframes blink {
0% {
opacity:0;
}
11%, 22% {
opacity:1;
}
33%, 100% {
opacity:0;
}
}
#keyframes blink {
0% {
opacity:0;
}
11%, 22% {
opacity:1;
}
33%, 100% {
opacity:0;
}
}
.blink {
opacity:0;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-name:blink;
-moz-animation-name:blink;
-o-animation-name:blink;
animation-name:blink;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.delay-1{
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.delay-3{
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.delay-5{
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
animation-delay: 5s;
}
.loop {
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.timingEaseIn {
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
And
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
is coming from another .css file. Any ideas? Thanks!
Same-thing is happening to me,
if I add
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
it no longer blurs for me.
Related
I am looking to make a word in a sentence to rotate between multiple options of words automatically with CSS. I want the word to stop at the last word and stay there. How could I do this using html/css?
Here is a link to the codepen.
https://codepen.io/nkangzing/pen/EwyqqM
<style>
.text-wrapper {
text-align: center;
}
.animated-words {
display: inline-block;
}
.animated-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #6b889d;
}
.animated-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
color: #6b739d;
}
.animated-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
color: #7a6b9d;
}
.animated-words span:nth-child(5) {
-webkit-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
color: #8d6b9d;
}
.animated-words span:nth-child(6) {
-webkit-animation-delay: 15s;
-ms-animation-delay: 15s;
animation-delay: 15s;
color: #9b6b9d;
}
.animated-words span {
position: absolute;
opacity: 0;
overflow: hidden;
color: #6b969d;
-webkit-animation: animateWord 18s linear infinite 0s;
-ms-animation: animateWord 18s linear infinite 0s;
animation: animateWord 18s linear infinite 0s;
}
#-webkit-keyframes animateWord {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
17% { opacity: 1; -webkit-transform: translateY(0px); }
20% { opacity: 0; -webkit-transform: translateY(30px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
<div class="text-wrapper">
The quick brown fox jumps over the lazy
<div class="animated-words">
<span class="am1">dog.</span>
<span class="am1">horse.</span>
<span class="am1">frog.</span>
<span class="am1">cat.</span>
<span class="am1">mouse.</span>
<span class="am1">rabbit.</span>
</div>
</div>
Here is a link to an example https://tympanus.net/Tutorials/CSS3RotatingWords/
The word keeps looping or just disappears at the end depending on if I put infinite to true.
Full link.
First, change the animation property from infinite to linear:
animation: animateWord 18s linear 1 0s;
Then, for the last name, I don't run the first animation, but another one that looks like this:
#-webkit-keyframes animateWordLast {
0% { opacity: 0; }
2% { opacity: 0; -webkit-transform: translateY(-30px); }
5% { opacity: 1; -webkit-transform: translateY(0px);}
100% { opacity: 1; }
}
To make the last word stay longer (but not forever), adding these at the end seems to do the job:
.animated-words .last {
-webkit-animation: animateWordLast 100s linear 1 18s;
animation: animateWordLast 100s linear 1 18s;
}
#-webkit-keyframes animateWordLast {
0% { opacity: 1; }
100% { opacity: 1; }
}
Check 100s duration, you can put a big number there, say 3600 (1 hr), and 18s the delay of this second animation.
I can't get any of these to work for me .... I'm using similar one with rotating words, and I changed my linear infinite to just linear like you said (not shown)
.rotateWords{
-webkit-animation: rotateWords 12s linear 1 0s;
-moz-animation: rotateWords 12s linear 1 0s;
-o-animation: rotateWords 12s linear 1 0s;
-ms-animation: rotateWords 12s linear 1 0s;
animation: rotateWords 12s linear 1 0s;
}
.rotating-words:nth-child(2) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.rotating-words:nth-child(3) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.rotating-words:nth-child(4) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rotating-words:nth-child(5) {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.rotate-last:nth-child(6) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#keyframes rotateWords {
0% {
opacity: 0 ;
}
8% {
opacity: 1 ;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
-o-animation-timing-function: ease-in;
-ms-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
10% {
opacity: 1;
}
15% {
opacity: 0;
}
100% {
opacity: 0;
}
}
I've got this CSS:
#-webkit-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#keyframes sliderFadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slider {
background-size: cover;
position: fixed;
top: 100px;
bottom: 0px;
height:calc(100%-135px);
width: 100%;
}
#slider img {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0px;
width: 100%;
height: 100%;
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#slider img {
-webkit-animation-name: sliderFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-moz-animation-name: sliderFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: sliderFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: sliderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
#slider img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#slider img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#slider img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#slider img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
I'm learning CSS Animations, but I didn't find out how to set the display time of one image.
I tried to change the animation delay but that only causes trouble..
Do you have an idea how to do this ?
Best regards
There were several things that needed some attention. Here's how I accomplished it, though there are other ways.
For the animation itself:
#keyframes sliderFadeInOut {
0% {
opacity:0;
}
17% {
opacity:1;
}
25% {
opacity:1;
}
92% {
opacity:1;
}
100% {
opacity:0;
}
}
This causes the image to fade in, then fade out at whatever animation-duration we set.
Set the animation-iteration-count to 1, so the animation runs once.
animation-iteration-count: 1;
Each image in the stack needs to be timed to appear, then disappear as the next image in the stack becomes visible. To do this, use animation-delay and increase it for each image in the stack.
#slider img:nth-child(1) {
animation-delay: 0s;
}
#slider img:nth-child(2) {
animation-delay: 4s;
opacity:0;
}
#slider img:nth-child(3) {
animation-delay: 8s;
opacity:0;
}
#slider img:nth-child(4) {
animation-delay: 12s;
opacity:0;
}
The staggered animation-delay properties cause the first image in the stack to be shown initially. It's animation takes 5 seconds and results in the image disappearing. At 4 seconds, the 2nd image in the stack starts it's animation, appearing just as the first image is disappearing. And then so on for the 3rd and 4th images.
In the code above there's also an initial opacity property for the 2nd, 3rd and 4th images. This is necessary to hide them initially.
As it's setup now the images will loop only once. Some minor tweaking to animation-delay and animation-iteration-count would cause it to loop infinitely.
Here's the working demo.
I'm making a website with a full background image transition.
The problem is the animation, i can't make them work properly. I want them to fade from one to another without the black screen between the images. This is my website in live: http://testes-cmt.bl.ee
I've tried a lot of things, but i can't fix this problem, even when trying to change the time.
Does anyone knows how to fix this?
This is my code so far:
HTML:
<ul class="cb-slideshow">
<li><span>Image 01</span></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
</ul>
CSS:
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
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 32s linear infinite 0s;
-moz-animation: imageAnimation 32s linear infinite 0s;
-o-animation: imageAnimation 32s linear infinite 0s;
-ms-animation: imageAnimation 32s linear infinite 0s;
animation: imageAnimation 32s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 32s linear infinite 0s;
-moz-animation: titleAnimation 32s linear infinite 0s;
-o-animation: titleAnimation 32s linear infinite 0s;
-ms-animation: titleAnimation 32s linear infinite 0s;
animation: titleAnimation 32s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 8s;
-moz-animation-delay: 8s;
-o-animation-delay: 8s;
-ms-animation-delay: 8s;
animation-delay: 8s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 16s;
-moz-animation-delay: 16s;
-o-animation-delay: 16s;
-ms-animation-delay: 16s;
animation-delay: 16s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
#-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
The quickest way I found to make the transitions crossfade rather than go through black was to adjust the #keyframes to extend the opacity: 1 time:
#keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
30% { opacity: 1 }
40% { opacity: 0 }
100% { opacity: 0 }
}
Something like this JSFiddle.
I have 4 images that I would like to crossfade using CSS inside a container:
<div id="frame">
<img class="img1" src="img1.jpg">
<img class="img2" src="img2.jpg">
<img class="img3" src="img3.jpg">
<img class="img4" src="img4.jpg">
</div>
I know that crossfading images consists of a CSS animation, but I haven't been able to find the CSS to make it work. Any help would be appreciated, thanks!
Here is a Fiddle
It's easier with 2 pictures, but as your wrote 4 you need to do this as 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;
}
}
#Crossfading {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#Crossfading img {
position:absolute;
left:0;
}
#Crossfading 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;
}
#Crossfading img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
#Crossfading img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
#Crossfading img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
#Crossfading img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
I have a slide that transitions between four pics. I have the slide going at a certain pace, but the last slide does not transition back to the first slide quickly. I have tried to add another nth and I have tried to slow down the last nth, but it doesn't work. I want the whole slide to transition at a certain time but the last slide needs to go back to the first without the huge black delay I am getting. Here is the code:
.picTransition .item {
position: absolute;
left: 0;
right: 0;
opacity: 0;
-webkit-animation: picTransition 56s linear infinite;
-moz-animation: picTransition 56s linear infinite;
-ms-animation: picTransition 56s linear infinite;
animation: picTransition 56s linear infinite;
}
.picTransition .item:nth-child(2) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.picTransition .item:nth-child(3) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.picTransition .item:nth-child(4) {
-webkit-animation-delay: 36s;
-moz-animation-delay: 36s;
-ms-animation-delay: 36s;
animation-delay: 36s;
}
#-webkit-keyframes picTransition {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#-moz-keyframes picTransition {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#-ms-keyframes picTransition {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
#keyframes picTransition {
0%, 25%, 100% { opacity: 0; }
4.17%, 20.84% { opacity: 1;}
}
What am I doing wrong here?
If you have 4 images and you set
animation-delay: 12s;
for each one, the cicle time is 4 * 12 = 48s.
Instead, you have a cycle time of 56s
animation: picTransition 56s linear infinite;
That means a 8 seconds gap a the end