How can I make this loop once, and then it remain as written unless page is reloaded? I tried many things I read. Could you please amend the code so I can see where you're inserting it?
Simply what i'm trying is to make it appear once, then remain until the page is reloaded or something.
Thank you!
I sincerely appreciate it.
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
body {
text-align:center;
background:none;
color:white;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:5vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div:first-of-type { /* For increasing performance
ID/Class should've been used.
For a small demo
it's okaish for now */
animation: showup 10s 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div:last-of-type {
width:0px;
animation: reveal 10s 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 10s 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0; animation-iteration-count: 1; animation-fill-mode: forwards;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; animation-iteration-count: 1; animation-fill-mode: forwards;}
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:1;width:355px; animation-iteration-count: 1; animation-fill-mode: forwards;}
}
#keyframes grow {
0% { font-size: 0; }
100% { font-size: 40px; animation-iteration-count: 1; animation-fill-mode: forwards; }
}
p {
font-size:12px;
color:white;
margin-top:200px;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
<div>Escape</div>
<div>
<span>into amazing experiences</span>
</div>
The showup keyframe ends in 0 opacity.
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
body {
text-align:center;
background:none;
color:red;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:5vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div:first-of-type { /* For increasing performance
ID/Class should've been used.
For a small demo
it's okaish for now */
animation: showup 10s 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div:last-of-type {
width:0px;
animation: reveal 10s 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 10s 1;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:1; animation-iteration-count: 1; animation-fill-mode: forwards;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; animation-iteration-count: 1; animation-fill-mode: forwards;}
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:1;width:355px; animation-iteration-count: 1; animation-fill-mode: forwards;}
}
#keyframes grow {
0% { font-size: 0; }
100% { font-size: 40px; animation-iteration-count: 1; animation-fill-mode: forwards; }
}
p {
font-size:12px;
color:white;
margin-top:200px;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
<div>Escape</div>
<div>
<span>into amazing experiences</span>
</div>
Related
I am trying to get rid of white space after I animate and translateY. Maybe setting the body height to auto? Does translateY leave a margin at the bottom or is that just the body white space, I can't click on it in inspect. Here is my code in a codepen. The white space is after my last div, I have attached my code and keyframes.
body{
padding: 0;
margin: 0;
overflow-x: hidden;
}
.banner{
position: relative;
transform: scale(1.5);
background: url(../image/splashing.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
animation: slides 1s;
animation-delay:2s;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(0,0,0,1);
animation-fill-mode:forwards;
-webkit-animation:slides 1s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: cubic-bezier(0,0,0,1);
-webkit-animation-fill-mode: forwards;
}
.header h1{
display: block;
position: absolute;
bottom: 15vh;
left: 0;
}
.header{
position: relative;
color: white;
opacity: 0;
animation: Fade 1s;
animation-delay: 3s;
animation-timing-function: cubic-bezier(0,0,1,1);
animation-fill-mode: forwards;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-webkit-animation: Fade 1s;
-webkit-animation-timing-function: cubic-bezier(0,0,1,1);
-webkit-animation-delay:3s;
-webkit-animation-fill-mode: forwards;
z-index: 999;
}
.orange{
background-color: orange;
animation: up .5s;
animation-delay: 2s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
-webkit-animation: up .5s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
}
#-webkit-keyframes slides{
0%{
-webkit-transform: scale(2,2);
}
100%{
-webkit-transform: scale(1,1);
}
}
#-webkit-keyframes Fade{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#-webkit-keyframes up{
from{
-webkit-transform: translateY(0);
}
to{
-webkit-transform: translateY(-30%);
}
}
using position:absolute; in class orange will do the trick
EDIT: corrected a typo in the CSS noted by ARLCode below - not relevant.
Using only CSS, I'm trying to animate some text, so that different blocks of text start hidden, become visible on a timer, and then fade on a timer, in sequence.
First, I start with all of the text hidden using p {visibility: hidden}, and add an animation to change the visibility value after n seconds.
In addition, I nested <p> in <div> and added an animation to fade <div> by animating opacity. This should fade the text that had just appeared, after (n+x) seconds.
The fade-out is no problem, but the pop-in never works. When I try to animate visibility, no matter how, the page always loads with the selected text visible, despite its earlier setting as hidden. Thus, it doesn't pop-in. It's just already there on the page. Below is the code and a link to codepen.
Am I on the wrong track?
HTML
<p id="one">this is visible on page load and then fades</p>
<div id="two-container"> <!---this div is for fading the text--->
<p id="two">this should START hidden, then appear AFTER p one fades</p>
</div>
CSS
/***************************************
GENERAL
***************************************/
p {
visibility: hidden;
}
/***************************************
TEXT ANIMATION SEQUENCE
***************************************/
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/***************************************
ANIMATION KEYFRAMES
***************************************/
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% {visibility: hidden; }
100% {visibility: visible; }
}
Code Pen Demo
You can see in the preview that the page loads #two as visible, despite p {visibility:hidden;} in the general section. Removing the pop-in animation fixes this. The fade-out animation for #two-container works fine. What am I missing?
A point of clarity: I do NOT expect - as many others here have - for visibility to animate as a fade. I want the desired text to appear suddenly, and AFTERWARDS fade gradually - thus the second animation selecting <div>. The binary nature of visibility is fine.
Okay, here you go I think this is the effect you want.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
visibility: hidden;
-webkit-animation: pop-in 2s;
-webkit-animation-delay: 4s;
-moz-animation: pop-in 2s;
-ms-animation: pop-in 2s;
-o-animation: pop-in 2s;
animation: pop-in 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
from {opacity: 1; }
to {opacity: 0; }
}
#-webkit-keyframes pop-in {
0% { visibility: visible; opacity: 0; -webkit-transform: scale(0.5); }
100% { visibility: visible; opacity: 1; -webkit-transform: scale(1); }
}
#-moz-keyframes pop-in {
0% { visibility: visible; opacity: 0; -moz-transform: scale(0.5); }
100% { opacity: 1; -moz-transform: scale(1); }
}
#keyframes pop-in {
0% { visibility: visible; opacity: 0; transform: scale(0.5); }
100% { opacity: 1; transform: scale(1); }
}
Codepen Demo
The issue is you placed -webkit- as --webkit- I fixed the CSS down below.
CSS
#one {
visibility: visible;
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two {
-webkit-animation-name: pop-in;
animation-name: pop-in;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#two-container {
-webkit-animation-name: fade-out;
animation-name: fade-out;
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes fade-out {
0%, 50% {opacity: 1; }
100% {opacity: 0; }
}
Code Pen Demo
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 have a <p> tag, and when I hover over it I want it to play an animation with #keyframes. It does the animation perfectly, but when the animation has finished, it will revert back to the state before the hovering. Does anyone know what I'm doing wrong?
EDIT: If you'd rather use a fiddle, check this out.
The reason why the buttons flash red is purely for testing reasons.
My HTML is as follows:
<div id="imgOver9" class="imgOver">
<p id="pLink9" class="pLink" href="home.html">Chillin', relaxin', maxin' all cool and shootin' some b-ball outside of school</p>
</div>
Here is the CSS for the <p> element:
.pLink{
position:absolute;
left:1vw;
top:-1vw;
height:24vw;
width:24vw;
opacity:0;
text-align:justify;
display:block;
font-family: 'Antic Didone', 'serif';
z-index:1;
background-color:red;
font-size:2vw;
}
.pLink:hover{
animation: pLink linear 0.1s;
animation-iteration-count: 1;
transform-origin:;
-webkit-animation: pLink linear 0.1s;
-webkit-animation-iteration-count: 10;
-webkit-transform-origin: ;
-moz-animation: pLink linear 0.1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: ;
-o-animation: pLink linear 0.1s;
-o-animation-iteration-count: 1;
-o-transform-origin: ;
-ms-animation: pLink linear 0.1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: ;
}
#keyframes pLink{
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-moz-keyframes pLink{
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-webkit-keyframes pLink {
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-o-keyframes pLink {
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
#-ms-keyframes pLink {
0% {
opacity:0;
color:#000000
}
100% {
opacity:1;
color:#8C8C96;
}
}
And here is the CSS for the parent div:
.imgOver{
opacity:0%;
width:26vw;
height:26vw;
}
.imgOver:hover{
animation: imgOver linear 0.1s;
animation-iteration-count: 1;
transform-origin: ;
-webkit-animation: imgOver linear 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: ;
-moz-animation: imgOver linear 0.1s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: ;
-o-animation: imgOver linear 0.1s;
-o-animation-iteration-count: 1;
-o-transform-origin: ;
-ms-animation: imgOver linear 0.1s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: ;
}
#keyframes imgOver{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes imgOver{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes imgOver {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes imgOver {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes imgOver {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
I have been going over this for hours now, and I cannot find the flaw. I would be very grateful for whoever manages to solve my issue.
You will need to use animation: pLink 0.1s forwards; in order to keep the final state of the animation.
Here is a demo fiddle
please see below:
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1}
50% {height:300px; opacity: 0; }
}
I would like to start fading the object away only 50% thorugh the animation. not at the beginning. This currently doesn't do any opacity animation.
Not getting your question quiet well but I assume you want to delay the start of your animation, if it's that so.. than you can use animation-delay property... This will help you in delay your animation by few seconds
Demo (Modified demo of my answer here)
.blink_me {
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-delay: 5s;
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
As commented by jCuber, if you want to start animation at 50% than try this
Demo
try this i made some changes in your fiddle it's work and also link of new fiddle
<div class="blink_me"> Blink</div>
.blink_me {
animation-name: blinker;
animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-name: blinker;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
background:#ff0000;
border:1px solid #00ff00;
}
#-webkit-keyframes blinker {
0% {width:20px; opacity: 0;}
50% {width:20px; opacity: 1; }
100% {width:50px; opacity: 0; }
}
http://jsfiddle.net/umz8t/293/
it looks like you just made a simple mistake the last line should read 100% not 50%. It could actually read anything between 51% to 100%. You also were missing a semi-colon, added it in.
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% { height:200px; }
50% {opacity:1; }
100% {height:300px; opacity: 0; }
}