.about5 {
animation:
fade 4s ease forwards; animation-delay: 5s;}
#keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0;}}
<div class="about5">About</div>
The animation delays for 5s correctly, but before fading, flashes once. Why? Is this because I'm using ease and should I use linear?
Page on desktop here.
If you only want your content to fade-out, you could set the opacity to the 0% keyframe at 1 like this:
...
#keyframes fade {
0% { opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0;}}
For more information about ease & linear, this post could explain it way better than I could :)
Related
i'm making a website for a school project and i want the links on the index page to be unclickable for only ~1.5 seconds. i have a fade-in that shows the elements of the home page, but you can click them before they fully fade in.
this is the code i'm using for the fade-in animation.
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I create Fade in and Fade out effect using different CSS ease using this site: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function I use few ease codes from that website but It seems like the letters are just blinking, I need them to come in one a time in sequential order (fading in).
.fade-in {
animation: fadeIn infinite alternate ease 2s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
To make it feel like fade in and out, assign it a duration, Like:
animation: fadeIn 2s infinite alternate ease;
Here the 2s is the duration or we can say the total time taken by the animation.
.fade-in {
animation: fadeIn 2s infinite alternate ease;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Its just fade in not out i want fade in and out in loop never stop it.</h1>
Codepen: https://codepen.io/manaskhandelwal1/pen/mdrzmKr
I'm working with HTML5 banner having a lot of CSS3 animation. To make reusable keyframe animation I'm using multiple animation on single element. It's working perfectly except safari.
CSS:
.text1 {
-webkit-animation: fadeOutRight 1s 3s forwards;
animation: fadeOutRight 1s 3s forwards;
}
.text2 {
-webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
-webkit-animation: fadeInLeft 1s 8s both;
animation: fadeInLeft 1s 8s both;
}
/* fadeInLeft */
#-webkit-keyframes fadeInLeft {
0% { -webkit-transform: translateX(-100px); opacity: 0; }
100% { -webkit-transform: translateX(0px); opacity: 1; }
}
#keyframes fadeInLeft {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0px); opacity: 1; }
}
/* fadeOutRight */
#-webkit-keyframes fadeOutRight {
0% { -webkit-transform: translateX(0px); opacity: 1; }
100% { -webkit-transform: translateX(100px); opacity: 0; }
}
#keyframes fadeOutRight {
0% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
jsfiddle link
Workable solutions:
Wrap the element with another/more element & add single animation to each element. This solution needs extra styling for wrapper element.
Merge multiple animation into one & this solution increase the complexity of the keyframes rule and it's not easily maintainable for complex animation.
According to accepted answer of another stackOverflow post –
You cannot animate same attribute more than once, on a same element, the last one will overwrite other.
It’s only true for safari in my case & first animation is only running not
second one. If I don’t animate same property on multiple animation
then it’s also fine for safari(jsfiddle). This one is not
suitable for me because I will need to animate same property in
multiple animations.
Note:
Although I'm using multiple animation on same element but I'm not animating at same time, there is delay between each animation.
Question:
Is it possible to use multiple CSS3 animation on same element regardless of animating property?
For some reason, Safari does not read trough the shorthand method for describing the animation, for example:
animation: test 1s 2s 3 alternate backwards
It needs to be described more detailed with its separate properties listed:
.class{
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
I am working on the below:
Fiddle Code
Here is HTML:
<div id="animation">
<ul>
<li>this is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>
This is the CSS:
#animation {
height: 100%;
width: 100%;
}
#animation ul {
position: relative;
text-align: center;
width: 100%;
}
#animation li {
position: absolute;
left:0;
top:0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) {
-webkit-animation: fadein 6s ease-in-out -4s infinite alternate;
-moz-animation: fadein 6s ease-in-out -4s infinite alternate;
animation:fadein 6s ease-in-out -4s infinite alternate;
}
#animation li:nth-of-type(2) {
-webkit-animation: fadein 6s ease-in-out 0s infinite alternate;
-moz-animation: fadein 6s ease-in-out 0s infinite alternate;
animation: fadein 6s ease-in-out 0s infinite alternate;
}
#animation li:nth-of-type(3) {
-webkit-animation: fadein 6s ease-in-out 4s infinite alternate;
-moz-animation: fadein 6s ease-in-out 4s infinite alternate;
animation: fadein 6s ease-in-out 4s infinite alternate;
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
I am new to CSS3 and with the code I want to stick paragraphs in instead of a couple of words. My question is, when the text fades in, how can you keep it on the screen for eg 10 seconds so someone can read it and the fade out into the next paragraph.
I have used duration and delay, doesn't really seem to work the way I wanted. Any help will be great.
The approach is really simple but you would need to do math as mentioned in Paulie_D's comment. I would leave the choice on whether to use it or not to you. Personally, I don't see anything wrong with this approach or any complexity provided the no. of elements to be faded in/out is static.
The overall approach is as follows:
We have 3 elements/paragraphs and for the example purpose I am going to make them fade-in for the first 3 seconds, stay as-is for the next 10 seconds and fade out for the last. So, for each element we need a total of 16 seconds in animation time.
While the first element has completed its animation and the second or third is being animated, the previous ones should hold the final state (that is faded out). To achieve this, the following need to be done:
Set the animation-duration for all elements such that it is the sum total of animation times for all elements. Here it would be 3*16s = 48s.
Set the keyframes such that each element would remain idle for 32s of the total duration because during this 32s gap the other two elements would be doing their animation. This is achieved by completing the fade-in, the stay and the fade-out all together within 33% of the animation's total duration.
Set animation-delay of second element to be 16s (because it has to start after the first one is completed) and that for the third to be 32s (because first two should complete).
Coming to the keyframes rule itself, as I said earlier the whole animation for one element should complete within 33% of the full duration. So at 6.25% (roughly 3s mark), we fade the element in and then till 26.75% (which is till 13s mark) we make it be at opacity: 1 and then at 33% (that is 16s mark) we completely fade it out.
#animation {
height: 100%;
width: 100%;
}
#animation ul {
position: relative;
text-align: center;
width: 100%;
}
#animation li {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
padding: 10px;
}
#animation li:nth-of-type(1) {
animation: fadein 48s ease-in-out infinite;
}
#animation li:nth-of-type(2) {
animation: fadein 48s ease-in-out 16s infinite;
}
#animation li:nth-of-type(3) {
animation: fadein 48s ease-in-out 32s infinite;
}
#keyframes fadein {
0% {
opacity: 0;
}
6.25% { /* 3s for fade in */
opacity: 1;
}
26.75% { /* roughly 10s for stay as-is */
opacity: 1;
}
33% { /* 3s for fade out */
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="animation">
<ul>
<li>This is</li>
<li>CSS3 looped</li>
<li>animation</li>
</ul>
</div>
The basic CSS code for this example looks like this:
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
When showing the element (by switching to the visible class), we want the visibility:visible to kick in instantly, so it’s ok to transition only the opacity property. And when hiding the element (by switching to the hidden class), we want to delay the visibility:hidden declaration, so that we can see the fade-out transition first. We’re doing this by declaring a transition on the visibility property, with a 0s duration and a delay.
At the end of the fade-out transition, we want to remove the hidden element from the flow, so that it does not leave a blank space in the middle of the page. Sadly we don’t have many options here:
display:none doesn’t work because it will be applied instantly, and
trying to delay it like we did with visibility won’t work;
position:absolute has the exact same issue;
It’s not ideal, but we can use margin-top (it can be transitioned and
thus delayed).
In order to use margin-top to hide the element, we need to have a slightly richer HTML structure:
<div class="visible">
<div>…</div>
</div>
And our CSS code becomes more complex:
.visible,
.hidden {
overflow: hidden;
/* This container should not have padding, borders, etc. */
}
.visible {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}
.hidden {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.visible > div,
.hidden > div {
/* Put any padding, border, min-height, etc. here. */
}
.hidden > div {
margin-top: -10000px;
transition: margin-top 0s 2s;
}
I was wondering how to make an image blink in CSS, if it is possible. I want to have it blink where it is.
I would also like to change the speed but mainly I want to make it blink.
CSS animations to the rescue!
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
img {
animation: blink 1s;
animation-iteration-count: infinite;
}
http://jsfiddle.net/r6dje/
You can make it a sharp blink by adjusting the intervals:
#keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
http://jsfiddle.net/xtJF5/1/
use setInterval method of Javascript use it as a reference of W3Schools and then change the css from visibility:visible to visiblity:hidden we will not use display:none as it will remove the space of the image as well but we do need the space for the image for the blinking thing to work.
You can do it with CSS easily. Just add below cross browser code in the CSS element of your image. You can set also timing if you change the digit in the code.
-webkit-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:blink normal 2s infinite ease-in-out;
-ms-animation:blink normal 2s infinite ease-in-out;
animation:blink normal 2s infinite ease-in-out;