I have the following code to have text slide in, but after the slide is over the text moves to the left. How would I make the text stay where it is when the slide is over?
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
}
#keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>
You need to use animation-fill-mode: forwards to preserve the last animation state. Since there was no animation-fill-mode specified, it used the default properties of the class name, i.e. resets/jumps to the top value specified after the animation is completed.
<style>
div.slide-left {
width: 100%;
overflow: hidden;
}
div.slide-left p {
animation: slide-left 5s;
font-size: 300%;
color: #000;
position: absolute;
top: 50px;
animation-fill-mode: forwards;
}
#keyframes slide-left {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 50%;
width: 100%;
}
}
</style>
<div class="slide-left">
<p>hello</p>
</div>
Related
I am trying to make it so when I open the page, test will show up as red and the testing will show up as white. There is a delay that I am using for when the page opens that I want to keep (if you run the program you will see).
Css
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
HTML
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
Do you mean like this? See changes under /* added CSS */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: grey;
}
html {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 3rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 .slide {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: crimson;
animation: text_reveal_box 1s ease;
animation-delay: .5s;
}
/* KetFrames */
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
#keyframes text_reveal {
100% {
color: white;
}
}
/* added CSS */
.red {
animation: text_reveal_red ease forwards;
animation-delay: 1s;
animation-iteration-count: 1;
}
#keyframes text_reveal_red {
100% {
color: crimson;
}
}
<section id="hero">
<div class="hero container">
<div>
<h1><span class="red">test</span> testing<span class="slide"></span></h1>
</div>
</div>
</section>
Can someone please review the following block of code and tell me why the animation on the image div and info div are not working.
this is the html file for the about page. (i had enclosed the block content in a div and given it position relative)
{%extends 'layout.html' %}
{%block content %}
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
Try adding:
#image { position:absolute; }
If you are using Firefox, open the dev tools, locate the div image, and see the styles info.
You will see something like this
Notice that left is grayed. Now, hover on the "i" circle. You will see a message stating "left has no effect because the element is not positioned".
So, this is your problem
.about {
align-items: center;
top: 5em;
display: flex;
flex-direction: row;
justify-content: center;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
#image {
animation-name: image2;
animation-duration: 3s;
animation-delay: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
.image-file {
border: none;
border-radius: 100px;
width: 200px;
height: 200px;
margin-right: 100px;
}
#info {
text-align: center;
max-width: 100%;
-webkit-animation-name: info2;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: forwards;
animation-name: info2;
animation-duration: 3s;
animation-fill-mode: forwards;
position: relative; /* added */
}
#keyframes image2 {
0% {
left: -100px;
}
100% {
left: 0;
}
}
#-webkit-keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
#keyframes info2 {
0% {
right: -100px;
}
100% {
right: 0;
}
}
<div class='head1'>
<h class='head'>Welcome to the Home page</h>
</div>
<div class='about'>
<div id='image'>
<image class='image-file' src='https://via.placeholder.com/150' alt='nelson'>
</div>
<div id='info'>
<h class='head'>About me</h>
<p class='text'>I am a web developer specialized in vanilla css,<br> html and flask. <br>But i am developing further.</p>
</div>
</div>
I'm trying to have a block of text overlay an animated (keyframed) image.
So far, I have tried combinations of display attributes such as inline-block with no luck. I have also attempted to play around with the positions, setting both the heading and the image to relative and absolute.
I would like the heading text (h4) to follow the animated image behind it.
html {
overflow: hidden;
}
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
vertical-align: bottom;
}
h4 {
position: absolute;
background-color: red;
width: 128px;
display: inline-block;
color: white;
font-size: 24px;
}
.transactionBG {
position: absolute;
left: 0;
overflow: hidden;
}
.transaction {
width: 64px;
height: 64px;
position: absolute;
animation: upDown 1.5s alternate infinite ease-in-out;
}
#keyframes upDown {
to {
transform: translateY(100px);
}
}
<div class="transactionBG" style="top: 10%;left: 50%;width: 128px;height: 278px;">
<img class="transaction" src="https://seeklogo.com/images/I/instagram-circle-logo-E285122AB7-seeklogo.com.png" style="width: 102.4px; height: 102.4px;">
<h4>test</h4>
</div>
Current State Demo: http://jsfiddle.net/4huj31fb/2/
you gave the animation to the image only. move this line :
animation: upDown 1.5s alternate infinite ease-in-out;
to the .transactionBG selector
html {
overflow: hidden;
}
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
vertical-align: bottom;
}
h4 {
position: absolute;
background-color: red;
width: 128px;
display: inline-block;
color: white;
font-size: 24px;
}
.transactionBG {
position: absolute;
left: 0;
overflow: hidden;
animation: upDown 1.5s alternate infinite ease-in-out;
}
.transaction {
width: 64px;
height: 64px;
position: absolute;
}
#keyframes upDown {
to {
transform: translateY(100px);
}
}
<div class="transactionBG" style="top: 10%;left: 50%;width: 128px;height: 278px;">
<img class="transaction" src="https://seeklogo.com/images/I/instagram-circle-logo-E285122AB7-seeklogo.com.png" style="width: 102.4px; height: 102.4px;">
<h4>test</h4>
</div>
transactionBG is the parent of h4. So you have to add the animation to transactionBG
.transactionBG {
position: absolute;
left: 0;
overflow: hidden;
animation: upDown 1.5s alternate infinite ease-in-out;
}
I have created this progress bar and I just can't make it stop at the end. Currently its stopping at 70% and gets cleared. Any ideas? Is there any kind of animation setting to stop it at 100%?
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.bar {
background: #ffcc00;
height: 10px;
width: 0%;
}
.animating {
-webkit-animation: progress 3s ;
}
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
animation-fill-mode: forwards; or -webkit-animation: progress 3s forwards;
Try to use 100% in:
#-webkit-keyframes progress {
0% {
width: 0%;
}
100% {
width: 70%; /* edit to 100% */
}
}
A Fancy version
.wrap {
background-color: #f2f2f2;
height: 10px;
width: 400px;
margin: 0 auto;
position: relative;
top: 20px;
margin-bottom: 20px;
}
.wrap div {
background-color: #ffcc00;
height: 10px;
width: 0%;
border-radius: 5px;
animation: loadbar 3s;
-webkit-animation: loadbar 3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
#keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div class="wrap">
<div class="bar animating"></div>
</div>
I am trying to stagger the opacity (fade) of three boxes via an infinite keyframe animation and the animation-delay property.
I am getting some unexpected behavior, as the third box fades away, it suddenly reappears faintly ("flickers") before the animation starts again. I am experiencing this across browsers.
I would like to use pseudo elements if possible, is there a known fix for this keyframe bug?
HTML
<div class="container">
<div class="child">
<div></div>
</div>
</div>
SCSS
.container {
position: fixed;
left: 150px;
top: 50px;
.child {
position: absolute;
animation:mymove 1s infinite;
&::before{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: inherit;
animation-delay: .15s;
}
div {
width: 25px;
height: 25px;
background-color: red;
animation: inherit;
animation-delay: .30s;
}
&::after{
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: inherit;
animation-delay: .45s;
}
}
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
JS Fiddle
The reason they flicker is because you have set an animation on their parent, the child.
And since its animation doesn't have a delay, it starts before its children, but will then be overridden by them as soon as their delay has passed, hence one can see a quick flash.
The best way to avoid any future issue with this, is to remove the animation from the child
.container {
position: fixed;
left: 150px;
top: 50px;
}
.container .child {
position: absolute;
}
.container .child::before {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
right: 40px;
animation: mymove 1s infinite;
animation-delay: 0.15s;
}
.container .child div {
width: 25px;
height: 25px;
background-color: red;
animation: mymove 1s infinite;
animation-delay: 0.3s;
}
.container .child::after {
display: block;
position: absolute;
width: 25px;
height: 25px;
background-color: red;
content: "";
left: 40px;
bottom: 0px;
animation: mymove 1s infinite;
animation-delay: 0.45s;
}
#keyframes mymove {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="container">
<div class="child">
<div></div>
</div>
</div>