the keyframes i created in my scss should be animating my height to make it a 2s animation but it has not done that instead the height is just transforming instantly but the width in the same keyframe is being animated.
#import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght#500&family=Roboto&display=swap");
* {
font-family: "Maven Pro", sans-serif;
color: white;
animation-delay: 1s;
}
body {
width: 100%;
height: 100vh;
margin: 0%;
background-color: green;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
position: absolute;
bottom: 5%;
}
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s 2s;
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
.swipe .side {
width: 180px;
height: 100%;
background-color: #fff;
display: flex;
justify-content: center;
animation-name: imageSize;
animation-fill-mode: forwards;
animation-duration: 0.3s;
}
.swipe .side img {
width: 80%;
}
.swipe .center {
position: relative;
animation-name: centerExpand;
animation-fill-mode: forwards;
animation-duration: 0.3s;
width: 74px;
height: 100%;
background-color: #38003c;
display: flex;
justify-content: center;
align-items: center;
}
.swipe .center .popup.firstHalf {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 135px;
height: 35px;
background-color: white;
color: #38003c;
text-align: center;
font-family: "roboto";
font-size: 22px;
line-height: 35px;
font-weight: 500;
animation-name: firstHalf;
animation-delay: 2s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports {
opacity: 0;
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 110px;
height: 76px;
background-color: #38003c;
color: #38003c;
display: flex;
align-items: center;
justify-content: center;
animation-name: firstHalf;
animation-delay: 4.8s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
.swipe .center .popup.eaSports img {
width: 61px;
}
.swipe .center .textContainer {
font-weight: 400;
opacity: 0;
margin: 0% 2% 0% 2%;
height: 100%;
width: 100%;
}
.swipe .center .textContainer.left {
text-align: right;
animation-delay: 1.15s;
animation-name: leftText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center .textContainer.right {
animation-name: rightText;
animation-delay: 1.15s;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.34, 0.58, 0.37, 1.48);
}
.swipe .center img {
width: 44px;
}
#keyframes swipeWidthHeight {
0% {
height: 179px;
width: 434px;
}
100% {
height: 77px;
width: 1064px;
}
}
#keyframes centerExpand {
90% {
justify-content: space-between;
}
100% {
width: 1020px;
justify-content: space-between;
}
}
#keyframes rightText {
0% {
opacity: 1;
}
100% {
padding-left: 10%;
opacity: 1;
}
}
#keyframes leftText {
0% {
opacity: 1;
}
100% {
padding-right: 10%;
opacity: 1;
}
}
#keyframes imageSize {
100% {
height: 77px;
width: 77px;
}
}
#keyframes firstHalf {
0% {
opacity: 1;
bottom: 0%;
z-index: -1;
}
10% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
90% {
z-index: -1;
opacity: 1;
bottom: 100%;
}
99% {
z-index: -1;
opacity: 1;
bottom: 0%;
}
100% {
z-index: -1;
opacity: 0;
bottom: 0%;
}
}
#keyframes close {
100% {
width: 1064px;
height: 77px;
bottom: -20%;
}
}
<body>
<div class="swipe">
<div class="left side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
<div class="center">
<div class="firstHalf popup">First Half</div>
<div class="eaSports popup">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218003415080/ea-sports-logo.png" alt="">
</div>
<div class="textContainer left">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357218208907274/premier-league-icon.png" alt="">
<div class="textContainer right">
<h1 class="text ">MANCHESTER CITY</h1>
</div>
</div>
<div class="right side">
<img src="https://cdn.discordapp.com/attachments/868038988437536768/918357217772732446/crest.svg" alt="">
</div>
</div>
</body>
In the codepen the class "swipe" and key frame of 'swipeWidthHeight'is the element thats is having issues with the height not animating.
here is a codepen below if the whole project for a better understanding
https://codepen.io/charlieschuyler/pen/zYBZzZv
Comma Missing:
.swipe {
animation-name: swipeWidthHeight, close;
animation-duration: 0.3s, 2s; /* missing comma */
animation-delay: 1s, 10s;
animation-fill-mode: forwards, forwards;
display: flex;
justify-content: center;
height: 179px;
width: 434px;
background-color: #fff;
}
Related
I have three bars set to slide in from the right and settle at the left. The animation itself is fine. The problem is that before the animation begins the three bars are positioned in the middle of the screen before disappearing and then commencing the animation.
When the page is refreshed I do not want these bars to be visible until they begin their slide-in. How can I do this?
<body>
<header>
<h1>xxxx xxxxxxx</h1>
<nav>
<ul>
<li>About Me</li>
<li id="contact_nav">Contact</li>
<li id="gallery_nav">Gallery</li>
</ul>
</nav>
<div class="container">
<div id="bar1" class="bar1"><p>Bespoke furniture ...</p></div><br>
<div id="bar2" class="bar2"><p>... and interesting items ...</p></div><br>
<div id="bar3" class="bar3"><p>... brought to life!</p></div><br>
</div>
</header>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#font-face {
font-family: 'Avenida Std';
src: url('AvenidaStd.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-image: linear-gradient(to right, #24243E, #302B63, #0F0C29);
}
h1, h2, h3, h4 {
font-family: 'Avenida Std';
}
header h1 {
font-size: 12vw;
color: grey;
position: absolute;
padding-left: 20px;
padding-top: 55px;
text-shadow: 0.10em 0.08em 5px black;
transform: rotate(-10deg);
}
nav {
position: relative;
}
nav ul {
align-content: right;
}
nav ul li {
font-family: 'Avenida Std';
font-size: 5rem;
margin-left: 85%;
padding-top: 20px;
list-style-type: none;
justify-content: right;
}
nav ul li a {
text-decoration: none;
color: white;
}
nav ul li a:hover {
color: yellow;
text-shadow: 0 0 40px yellow;
}
nav #contact_nav {
padding-top: 0.5rem;
}
nav #gallery_nav {
padding-top: 0.5rem;
padding-bottom: 0;
z-index: 100;
}
#bar1 {
width: 50vw;
height: 3rem;
background: black;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#bar2 {
width: 50vw;
height: 3rem;
background: black;
}
#bar3 {
width: 50vw;
height: 3rem;
background: black;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
.container {
position: relative;
}
.container p {
color: white;
font-family: sans-serif;
font-size: 2.5rem;
position: relative;
padding-left: 5px;
}
/* Bars Animation CSS */
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
}
#keyframes move1 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 80%;
}
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
}
#keyframes move2 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 65%;
}
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
z-index: 999;
}
#keyframes move3 {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100%);
left: 52%;
}
}
Just add default value for transform like this:
.bar1 {
animation: move1 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 500ms;
position: fixed;
top: 30%;
margin-bottom: 2px;
left: 30%;
z-index: 50;
transform: translateX(100vw); // added
}
.bar2 {
animation: move2 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1000ms;
position: fixed;
top: 36%;
left: 30%;
z-index: 999;
transform: translateX(100vw); // added
}
.bar3 {
animation: move3 1.5s ease-out infinite forwards;
animation-iteration-count: 1;
animation-delay: 1500ms;
position: fixed;
top: 42%;
left: 30%;
transform: translateX(100vw); //added
z-index: 999;
}
I am studying CSS animation. I want my animation moving one by one, as I don't know JS I want to do it by CSS only. How can I do this? I faced the problem of rules from and to in animations, when I change them the animations don't work as expected.
I have the following HTML
body {
margin: 0;
background: grey;
}
main {
font-family: Open Sans;
text-transform: uppercase;
line-height: 1;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
}
.animation {
width: 20em;
height: 4em;
margin: 1em auto;
position: relative;
}
.squares {
margin: auto;
background: red;
/* display: flex;
flex-wrap: wrap;
justify-content: center;*/
}
.small_square {
width: 10px;
height: 10px;
background-color: white;
text-align: center;
display: block;
text-align: center;
position: relative;
margin: 0;
padding: 0;
left: 48%;
animation: appearance_small 1s ease-in-out;
animation: move_around 3s ease-in-out;
*/
}
.big_square {
margin: auto;
width: 40px;
height: 40px;
background-color: black;
display: block;
position: relative;
top: 30px;
animation: appearance_big 1.3s ease-in-out;
animation-delay: 2s;
animation: spin 3s ease-in-out;
forwards;
}
#keyframes appearance_big {
0% {
transform: scale(0%);
}
100% {
opacity: 1;
}
}
#keyframes appearance_small {
0% {
opacity: 0;
transform: scale(0%);
top: 50px;
}
100% {
opacity: 1;
top: 0px;
}
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
#keyframes move_around {
from {
transform: translate(50%, 50px) rotate(0turn) translate(-50%, -50px);
}
to {
transform: translate(50%, 50px) rotate(0.50turn) translate(-0%, -50px);
}
<main>
<div id="animation" class="animation">
<div class="squares">
<div class="small_square"></div>
<div class="big_square"></div>
</div>
</main>
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 have my task on three circles ripple effect animation where I am not getting the third circle I have a tried a lot but only two circles are coming is there a possibility of using one more keyframes and getting the third circle can anyone point me in the right direction thanks in advance.
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
}
.ripple::after { animation-delay: 1s; }
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover::after { animation-delay: .5s; }
#keyframes cycle-colors {
0% { border-color: #55443D; }
25% { border-color: #55443D; }
50% { border-color: #55443D; }
75% { border-color: #55443D; }
100% { border-color: #55443D; }
}
#keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}
<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png">
</div>
body {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
}
html {
height: 100%;
}
.ripple {
position: relative;
height: 100px;
width: 100px;
}
.ripple img {
position: relative;
border-radius: 50%;
height: 100%;
width: 100%;
z-index: 2;
}
.ripple span,
.ripple::before,
.ripple::after {
animation: pulse 2s linear infinite;
border: #55443D solid 3px;
border-radius: 50%;
box-sizing: border-box;
content: ' ';
height: 140%;
left: -20%;
opacity: .6;
position: absolute;
top: -20%;
transform: scale(0.714);
width: 140%;
z-index: 1;
pointer-events:none;
}
.ripple span {
animation-delay: .5s;
}
.ripple::after {
animation-delay: 1s;
}
.ripple:hover span,
.ripple:hover::before,
.ripple:hover::after {
animation: pulse 1s linear infinite, cycle-colors 6s linear infinite;
}
.ripple:hover span {
animation-delay: .25s;
}
.ripple:hover::after {
animation-delay: .5s;
}
#keyframes cycle-colors {
0% {
border-color: #55443D;
}
25% {
border-color: #55443D;
}
50% {
border-color: #55443D;
}
75% {
border-color: #55443D;
}
100% {
border-color: #55443D;
}
}
#keyframes pulse {
to {
opacity: 0;
transform: scale(1);
}
}
<div class="ripple">
<img src="https://image.ibb.co/dBkJkV/person-4.png"><span></span>
</div>
I want to make center this Miss, hug...
This is my site: https://www.ajdinalic.cf/
Image: http://prntscr.com/69oewr
I am still new at this coding, and found this code on google
This is on weebly btw, i tried to fix but i dont know and i dont want to make it worse
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence{
margin: 0;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #444;
white-space: initial;
font-size: 200%;
font-weight: normal;
}
.rw-words{
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
text-align: center;
}
.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
text-align: center;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6) {
animation-delay: 15s;
color: #9b6b9d;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head></head>
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>I</span>
<br>
<div class="rw-words rw-words-1">
<span>Miss</span>
<span>Want to hug</span>
<span>Want to kiss</span>
<span>Need</span>
<span>Want to see</span>
<span>Want to be with</span>
</div><br>
<span>You</span>
</h2>
</section>
<body class=' wsite-theme-light'>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
<div style='display:none'>{content}</div>
<div style='display:none'>{content}>{footer}</div>
</body>
</html>
Add top: 75px; left: 0; right: 0; to .rw-words span.
Let me know if this helps.