I have a sample:
link
CODE HTML:
<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">
CODE CSS:
#keyframes fade-img {
0%{
opacity: 0;
}
100%{
opacity: 0.5;
filter: alpha(opacity=50);
-moz-transition: all 0.9s ease;
-webkit-transition: all 0.9s ease;
}
}
.img{
animation-name: fade-bg;
animation-iteration-count: infinite;
animation-duration: 2s;
}
I want to repeat this animation after 2 seconds but it does not understand why it does not work.
Can you please tell me what is wrong?
Is it a syntax mistake?
Thank you!
You have a typo. The animation is called .fade-img not .fade-bg. See the code snippet below. A little extra something: you can add animation-direction: alternate; to make the image fade both in and out smoothly.
#keyframes fade-img {
0%{
opacity: 0;
}
100%{
opacity: 0.5;
filter: alpha(opacity=50);
}
}
.img{
max-width: 100%;
animation-name: fade-img;
animation-iteration-count: infinite;
animation-duration: 2s;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
animation-direction: alternate;
}
<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">
`
Related
I have the following code which is working fine on Chrome but not on Firefox. I want to know if something is going wrong in my code as the animation is totally different in this two browsers. As on Chrome the animation is smooth and the frames are fading nice. But on Firefox everything seem to be mess as there the animation seem to be cutted off.
#banner img {
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes bannerFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#top {
-moz-animation-name: bannerFadeInOut;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
-moz-animation-direction: alternate;
animation-name: bannerFadeInOut;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
HTML
<div id="banner">
<img class="back" id="back" src="frames/frame_1.jpg"/>
<img class="top" id="top" src="frames/frame_2.jpg"/>
<img id="logo1" type="image/svg+xml" src="" />
<div class="border" id="border"></div>
<img id="cta" src="frames/title.png"/>
</div>
I'm using keyframes in CSS for the first time.
It didn't work on the 2 browsers I tested (Safari and Chrome) and I learned that all keyframe-related properties need browser prefixes, so I added -webkit- but it still won't work
The purpose is to have the images crossfade every 10 seconds, but I only see Image2 constantly.
Here's the code for the div:
<div id="cf">
<img class="bottom" src="Image1.jpg" width = "300px">
<img class="top" src="Image2.jpg" width = "300px" />
</div>
CSS:
#cf {
position:relative;
width:300px;
margin:0 auto;
}
#cf img {
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;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#-webkit-keyframes cf3FadeInOut {
0% {
-webkit-opacity:1;
}
45% {
-webkit-opacity:1;
}
55% {
-webkit-opacity:0;
}
100% {
-webkit-opacity:0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
You have made a mistake calling the animation. the id #cf3 doesn't exist. The rest works fine (but delete the -webkit- for opacity, that css property doesn't need it)
#cf img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-iteration-count: infinite;
-webkit-duration: 10s;
-webkit-animation-direction: alternate;
}
FIDDLE
I've set up an animation for a certain div.
.Animation
{
-webkit-animation-fill-mode: both; /*and also -moz, -ms etc. */
animation-fill-mode: both;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes scaleAnimation /*and also -moz, -ms etc. */
{
0%
{
opacity: 0;
-webkit-transform: scale(2);
}
100%
{
opacity: 1;
-webkit-transform: scale(1);
}
}
.ScaleAnimation
{
-webkit-animation-name: scaleAnimation; /*and also -moz, -ms etc. */
animation-name: scaleAnimation;
}
But i want a different custom ease (cubic bezier) for the opacity and another custom ease for the transform. How do I get this to work.
The following didn't work:
transition: opacity 1s ease-in-out;
transition: scale 1s ease-in-out;
So it definitely won't work with a custom ease, cubic-bezier(0.555, -0.130, 0.270, 1.075); for example.
Any thoughts? :)
For transitions, you could specify multiple transitions by comma-separating those.
transition: <duration> <property> <delay> <timing-function>, ....
transition: 1s opacity 1s ease-in-out, 1s scale 1s linear;
If you want to go the animation/keyframe route, then you could create two animation keyframes. One for scale, and the other for opacity. And then comma-separate them in the animation setup for the element.
The property for easing is animation-timing-function. For webkit based browsers (as it seems from your question that you don't mind vendor prefixes), it becomes -webkit-animation-timing-function.
You could set it up like this snippet:
div {
width: 120px; height: 120px;
background-color: red;
display: inline-block;
}
div.d1 {
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s, 2s;
-webkit-animation-duration: 2s, 2s;
-webkit-animation-name: scaleAnimation, opacityAnimation;
-webkit-animation-timing-function:
cubic-bezier(0.1, 0.7, 1.0, 0.1), ease-in;
}
div.d2 {
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s, 2s;
-webkit-animation-duration: 2s, 2s;
-webkit-animation-name: scaleAnimation, opacityAnimation;
-webkit-animation-timing-function: linear linear;
}
#-webkit-keyframes scaleAnimation {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
#-webkit-keyframes opacityAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="d1">D1</div>
<div class="d2">D2</div>
Fiddle: http://jsfiddle.net/abhitalks/3y7pcd1t/1/
.
I want a fadein and fadeout effect in CSS which should not stop (should be continous).
I created one: http://jsfiddle.net/z5UB5/
Code :
CSS:
body { background: #fff; }
#-webkit-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
.objblink {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-animation-direction: normal;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease-in-out;
}
HTML:
<p class="objblink">TEST</p>
But this code is only working in Google Chrome. I want that it should also work in other major browsers.
You can see my modification here jsfiddle, i make your animation definition more short :
-moz-animation: blink 2s ease-in-out infinite normal;
-webkit-animation: blink 2s ease-in-out infinite normal;
animation: blink 2s ease-in-out infinite normal;
Add -moz and #keyframes syntax and removed single quotes from blink.
You can see shorthand syntax of animation at Mozilla Dev Network
If you're open to a jQuery solution, this should do the trick for you:
$(document).ready(function(){
shown = true;
setInterval(function(){
if(shown == true)
$(".objblink").fadeOut();
else
$(".objblink").fadeIn();
shown = !shown;
},500);
});
Here is the JSFiddle
As your latest fiddle, you have declare the animation name with single quote. Remove that one and it will work.
Instead of this
#-moz-keyframes 'blink' {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
Use this
#-moz-keyframes blink {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
DEMO
CSS:
.objblink{
-webkit-animation: myfirst 3s;
animation:myfirst 3s;
}
#keyframes myfirst {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}
HTML:
<p class="objblink">TEST<meta http-equiv="refresh" content="3" /></p>
I have a simply css animation running on my website which should simply fade in various sections of my webpage at different times. Unfortunately, this aspect of my page works only in chrome and Safari, but not in Firefox and IE.
After doing a little research, I included unit values for the fade timeframes, but this resulted in no improvement. Here is the following css:
a {
text-decoration: none; color: #FFFFFF; position: relative;
transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-webkit-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
}
/*Animations*/
#-webkit-keyframes FADEY {
0% { opacity: 0; }
100% { opacity: 1; }
}
.intro {
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
[role="article"] {
-webkit-opacity: 0;
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 0.5s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}
.design-selection, .design-archives {
-webkit-opacity: 0;
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-delay: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
}
Any advice would be greatly appreciated.
Thanks,
choltz
You currently have the Webkit's vendor prefix for for animation, -webkit. This is why it only works in Webkit-based browsers such as Chrome and Safari. For older versions of Firefox, you need to add -moz- as well. Current Firefox and current Internet Explorer just use the real version, animation with no prefix.
.intro {
-webkit-animation-name: FADEY;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-moz-animation-name: FADEY;
-moz-animation-duration: 1s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
animation-name: FADEY;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
You can also write out the CSS shorthand, to minimize the lines of code:
-webkit-animation:FADEY 1s 1 ease-in-out;
-moz-animation:FADEY 1s 1 ease-in-out;
animation:FADEY 1s 1 ease-in-out;