I've created this snippet on Codepen: the earth rotates and the car moves. However, when car moves it makes the earth rotate too. I want all elements to go their own path.
Why does the car affect the earth, and how can that be avoided?
body {
background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg);
background-size: 1000px;
}
#firstimg {
background-image: url(http://www.21tech.ir/dfxhfgh.gif);
position: absolute;
background-repeat: no-repeat;
background-size: 100px;
animation: anim1 14s infinite linear;
margin: 40px;
}
#earth {
margin-left: 100px;
width: 500px;
height: 500px;
background: url(http://www.drodd.com/images14/map-of-earth1.jpg);
border-radius: 50%;
background-size: 1000px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
filter: brightness(50%);
}
#keyframes rotate {
from {
background-position-x: 0px;
}
to {
background-position-x: 1000px;
}
}
#keyframes anim1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
50% {
transform: translate(20px, 20px) rotate(10deg)
}
}
<div id="firstimg">
<div>
<div id="earth"></div>
You have not closed you firstimg div tag, hence it runs under a single div
<div id="firstimg"></div>
<div id="earth"></div>
Follow Codepen
Related
I am facing an issue implementing the animation. The below code snippet is working fine. Currently, the background is animating from left to right only. But I want to reverse the above animation when its cycle ends (reaches the bottom right corner), then the animation should start from there to the left.
I also tried adding a new animation with a 1.5s delay (when the first
animation ends) by changing the background position (with javascript),
but it didn't work.
I've already read all the possible answers but didn't find a useful one. Can anyone assist with a suggestion/alternative approach or point out what I'm doing wrong? Any help would be greatly appreciated..! 🤗
.user-img {
width: 100px;
height: 100px;
border-radius: 50%;
animation: bg-slide 1.5s ease infinite;
border: 6px solid rgba(255, 255, 255, 0.12);
background: 0 0/300% 300% linear-gradient(-60deg, #eee 40%, #18d26e 50%, #eee 60%);
}
#keyframes bg-slide {
from {
background-position: 100% 50%;
}
to {
background-position: 0 50%;
}
}
<img src="https://images.unsplash.com/photo-1630208232589-e42b29428b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="user-image" class="user-img" />
You have to add alternate to your animation setting (for the animation-direction):
.user-img {
width: 100px;
height: 100px;
border-radius: 50%;
animation: bg-slide 1.5s ease infinite alternate;
border: 6px solid rgba(255, 255, 255, 0.12);
background: 0 0/300% 300% linear-gradient(-60deg, #eee 40%, #18d26e 50%, #eee 60%);
}
#keyframes bg-slide {
from {
background-position: 100% 50%;
}
to {
background-position: 0 50%;
}
}
<img src="https://images.unsplash.com/photo-1630208232589-e42b29428b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="user-image" class="user-img" />
Add animation-direction: alternate; in the .user-img class.
.user-img {
width: 100px;
height: 100px;
border-radius: 50%;
animation: bg-slide 1.5s ease infinite;
animation-direction: alternate;
border: 6px solid rgba(255, 255, 255, 0.12);
background: 0 0/300% 300% linear-gradient(-60deg, #eee 40%, #18d26e 50%, #eee 60%);
}
#keyframes bg-slide {
from {
background-position: 100% 50%;
}
to {
background-position: 0 50%;
}
}
<img src="https://images.unsplash.com/photo-1630208232589-e42b29428b19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8cHJvZmlsZSUyMHBob3RvfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=400&q=60" alt="user-image" class="user-img" />
I have a sequence of animations, each delayed to appear one after the other.
Sequence:
Logo
h1
hr
background starts scrolling upwards
Using animation-fill-mode: backwards each element does not appear on the page until it is animated-in. I would like the same to happen to the background. So it does not appear until all the other animations are complete. The background would then start scrolling upwards.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
display: block;
background: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: background;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
100% {
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
If you want the background to just appear, try this.
/*Top Gif*/
.banner {
position: relative;
float: left;
width: 100%;
height: 400px;
text-align: center;
}
.opening {
animation-delay: 5s;
display: block;
animation: 100s scroll infinite linear;
animation-delay: 3s;
animation-fill-mode: forwards;
margin: 2px 0 0 0;
}
.textBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.logo {
width: 300px;
margin-bottom: 20px;
}
.logo--animated {
animation: popUp 1s ease-out;
}
.textBox h1 {
color: #FFF;
font-size: 60px;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
line-height: 50px;
animation: moveInRight 0.7s ease-out;
animation-delay: 1.2s;
animation-fill-mode: backwards;
}
hr.style-two {
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
animation: moveInRight 0.4s ease-out;
animation-delay: 1.9s;
animation-fill-mode: backwards;
}
.textBox h4 {
line-height: 10px;
font-weight: normal;
font-size: 20px;
animation: moveInRight 0.6s ease-out;
animation-delay: 2.3s;
animation-fill-mode: backwards;
}
/*Animations*/
#keyframes scroll {
0% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
}
100% {
background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/footer_lodyas.png);
background-position: 0px -3000px;
}
}
#keyframes popUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-80px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="row">
<div class="col-lg-12">
<div class="banner opening">
<div class="opening">
<div class="textBox">
<img class="logo logo--animated" src="logo.png">
<h1>Title</h1>
<hr class="style-two">
<h4>Sub-Title</h4>
</div>
</div>
</div>
</div>
</div>
I have a question on how I can morph a hexagon into a triangle. So the animation it starts off as a hexagon, it's transforms or morphs into a triangle which goes then back to the hexagon (infinite iteration)
<div class="hexagon"></div>
<div id="triangle-up"></div>
<div id="triangle-down"></div>
My CSS code
.hexagon {
position: relative;
width: 130px;
height: 75.06px;
background-color: #2196F3;
margin: 0 auto;
margin-top: 50px;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 37.53px solid #2196F3;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 37.53px solid #2196F3;
}
#triangle-up {
width: 0;
height: 0;
margin: 0 auto;
margin-top: -86px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #2196F3;
animation: triangle-up_show;
animation-duration: 4s;
animation-timing-function: linear;
animation-play-state: paused;
animation-delay: 3s;
}
#triangle-down {
width: 0;
height: 0;
margin: 0 auto;
margin-top: -100px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #2196F3;
animation: triangle-down_show;
animation-duration: 6s;
animation-timing-function: linear;
animation-play-state: paused;
}
#keyframes hexagon_hide {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes triangle-up_show {
0% { opacity: 0 }
50% { opacity: 1 }
100% { opacity: 0 }
}
#keyframes triangle-down_show {
0% { opacity: 0 }
50% { opacity: 1 }
100% { opacity: 0 }
}
In css this can be done with the polygon clip and animation:
.shape {
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
background: red;
width: 300px;
height: 300px;
animation: morph 2s infinite;
}
#keyframes morph {
0% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
50% {clip-path: polygon(50% 0%, 50% 0, 100% 0, 50% 100%, 0 0, 50% 0);}
100% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
}
<div class="shape">
</div>
I find this site http://bennettfeely.com/clippy/ a good tool for morphing polygon clips in css
I'm aware this isn't css but this could be done using an svg animation:
<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon id="shape" class="hex">
<animate
dur="2.5s"
repeatCount="indefinite"
attributeName="points"
values="300,150 225,280 75,280 0,150 75,20 225,20;
300,20 150,280 150,280 0,20 75,20 225,20;
300,20 150,280 150,280 0,20 75,20 225,20;
300,150 225,280 75,280 0,150 75,20 225,20;
300,150 225,280 75,280 0,150 75,20 225,20;"/>
</polygon>
</svg>
I hope this helps anyway :)
https://css-tricks.com/svg-shape-morphing-works/
i'm recently experiencing an issue with white blocks appearing on the top/bottom of site whenever i scroll it a greater bit. The white blocks are part of body background, because changing body backgroundcolor makes blocks change color too.
I have already tried setting opacity for body but this gave no effect at all... Any ideas what could possibly be going wrong? Or maybe i just have too heavy transition/fade content so that rendering doesn't work smooth?
Here's the screenshot of the issue, pretty hard to catch on ss since it only happens for half sec when scrolling. The block is indicated by red arrows.
EDIT:
I'd actually post parts of my css file, maybe this would bright any clue:
html, body {
height: 100%;
position: static;
overflow-x:hidden;
-webkit-transform: translate3d(0, 0, 0);
background-color: rgba(255, 255, 255, 0.06);
transform: translate3d(0,0,0);
}
.heroEffects .bg {
-webkit-backface-visibility: hidden;
transform: scale(1);
-webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
-moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
-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;
transform: translate3d(0,0,0);
}
.bgimg {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
transform: scale(1);
overflow: hidden;
-webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
-moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("../img/gallery/slonecz.jpg");
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 15s;
animation-delay: 5s;
-webkit-animation-delay: 5s
-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 15s;
transform: translate3d(0,0,0);
}
#keyframes backgroundchangeFadeInOut {
0% {
background-image: url("../img/gallery/slonecz.jpg");
}
15% {
background-image: url("../img/gallery/slonecz.jpg");
}
30% {
background-image: url("../img/gallery/slonecz.jpg");
}
42% {
background-image: url("../img/gallery/slonecz.jpg");
}
50% {
background-image: url("../img/gallery/motyl.jpg");
}
68% {
background-image: url("../img/gallery/motyl.jpg");
}
80% {
background-image: url("../img/gallery/motyl.jpg");
}
95% {
background-image: url("../img/gallery/motyl.jpg");
}
100% {
background-image: url("../img/gallery/slonecz.jpg");
}
}
.heroEffects .shade {
opacity: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 3;
height: 100vh;
position: fixed;
width: 100%;
}
And here's Vimeo vid, the screen recorder seems to be on top and you can actually see what happens when the browser with this site is in the background... https://vimeo.com/198493320
In my case using overflow: hidden; on body worked.
body {
overflow: hidden;
}
this works for me on chrome 76.0.3809.87
overflow: auto;
hope it can help.
I'm trying to created a continuous wobble animation on a div id, and its not working for me. Any help would be greatly appreciated.
This is my code:
.figure {
display: inline-block;
width: 200px;
height: 200px;
background: rgb(23, 147, 219);
padding: 40px;
box-shadow: inset -5px -15px rgba(0, 0, 0, .06);
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 50%;
animation: wobble 5s ease-in-out infinite;
transform-origin: center bottom;
transition: padding .3s, bottom .3s;
text-align: center;
}
#keyframes wobble {
33% {
transform: rotate(5deg);
}
66% {
transform: rotate(-5deg);
}
}
<div class="figure" ></div>
Actually it is working , but since it is a sphere you can't notice it rotating , remove border-radius to see it. Also use alternate to see better effect
animation:wobble 5s ease-in-out infinite alternate;
also use 0% to 100% animation for better result.