Im currently trying to do an animation whose end position should look like this, as seen in the image below, noe thay its an animation
It worked fine until I switched to a <1080p resolution, and now its all messed up and looks like this:
I used responsive "vw / %" So i dont understand why is that happening.
And the code itself
body {
background-image: url("https://i.imgur.com/I6ixFFG.jpg");
}
/* background sky */
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
/* Frontal waves */
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 80vw;
height: 13.5vw;
z-index: 3;
bottom: -9vw;
left: -1vw;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
/* back waves */
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 80vw;
height: 14vw;
z-index: 1;
bottom: -9vw;
left: -2vw;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
/* boat */
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 26vw;
height: 20vw;
background-repeat: no-repeat;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
/* question mark */
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 5vw;
height: 5vw;
position: relative;
background-repeat: no-repeat;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
/* Frontal waves */
#keyframes olas-front {
0% {
left: -1vw;
bottom: -9vw;
}
50% {
left: 0vw;
bottom: -8.7vw;
}
100% {
left: -1vw;
bottom: -9vw;
}
}
/* back waves */
#keyframes olas-back {
0% {
left: -2vw;
bottom: -9vw;
}
50% {
left: -3vw;
bottom: -8.7vw;
}
100% {
left: -2vw;
bottom: -9vw;
}
}
/* boat */
#keyframes barco {
0% {
left: -7vw;
}
100% {
left: 0vw;
}
}
/* boat */
#keyframes barco-balanceo {
0% {
bottom: -7.6vw;
}
50% {
bottom: -7.9vw;
}
100% {
bottom: -7.6vw;
}
}
/* question mark */
#keyframes interrogacion {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo"> <!-- background sky -->
<div class="olasFront"></div> <!-- Frontal waves -->
<div class="bote"> <!-- boat -->
<div id="interrogacion"> <!-- question mark -->
</div>
</div>
<div class="olasBack"></div> <!-- back waves -->
</div>
</body>
</html>
With this code we simply change background size accordingly other objects to maintain same aspect ratio in every screen.
body {background-image: url("https://i.imgur.com/I6ixFFG.jpg");}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 20vw;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 80vw;
height: 13.5vw;
z-index: 3;
bottom: -9vw;
left: -1vw;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
background-size:4vw auto;
}
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 80vw;
height: 14vw;
z-index: 1;
bottom: -9vw;
left: -2vw;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
background-size:4vw auto;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: relative;
z-index: 2;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size:13vw auto;
bottom: -7.6vw;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size:1vw auto;
margin-left: 10vw;
bottom: 1.5vw;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
#keyframes olas-front {
0% {left: -1vw;bottom: -9vw;}
50% {left: 0vw;bottom: -8.7vw;}
100% {left: -1vw;bottom: -9vw;}
}
#keyframes olas-back {
0% {left: -2vw; bottom: -9vw;}
50% {left: -3vw;bottom: -8.7vw;}
100% {left: -2vw;bottom: -9vw;}
}
#keyframes barco {
0% {left: -7vw;}
100% {left: 0vw;}
}
#keyframes barco-balanceo {
0% {bottom: -7.6vw;}
50% {bottom: -7.9vw;}
100% {bottom: -7.6vw;}
}
#keyframes interrogacion {
from {opacity: 0;}
to {opacity: 1;}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo"> <!-- background sky -->
<div class="olasFront"></div> <!-- Frontal waves -->
<div class="bote"> <!-- boat -->
<div id="interrogacion"> <!-- question mark -->
</div>
</div>
<div class="olasBack"></div> <!-- back waves -->
</div>
</body>
</html>
I make image fixed size. Try resize with codepen
body {
background-image: url("https://i.imgur.com/I6ixFFG.jpg");
}
.fondo {
background-image: url("https://i.imgur.com/UAq0obS.png");
width: 50vw;
height: 30vw;
min-height: 250px;
background-size: cover;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.olasFront {
background-image: url("https://i.imgur.com/w5yrlLy.png");
position: absolute;
width: 120%;
height: 75px;
z-index: 3;
bottom: -6%;
left: -3%;
animation: olas-front 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
.olasBack {
background-image: url("https://i.imgur.com/e1DVYvt.png");
position: absolute;
width: 100%;
width: 120%;
height: 75px;
z-index: 1;
bottom: 0;
left: -2%;
animation: olas-back 2s infinite linear;
animation-iteration-count: infinite;
background-repeat: repeat-x;
}
.bote {
background-image: url("https://i.imgur.com/Fk4CUZp.png");
position: absolute;
z-index: 2;
height: 215px;
width: 100%;
background-repeat: no-repeat;
bottom: -10%;
animation: barco 2s linear, barco-balanceo 2s linear infinite;
}
#interrogacion {
background-image: url("https://i.imgur.com/1g1A4sx.png");
width: 50px;
height: 50px;
position: absolute;
background-repeat: no-repeat;
top: -30px;
left: 190px;
opacity: 0;
animation: 2s interrogacion 2s linear;
animation-fill-mode: forwards;
}
#keyframes olas-front {
0% { left: -3%; }
50% { left: 0; }
100% { left: -3%; }
}
#keyframes olas-back {
0% { left: -2%; }
50% { left: -5%; }
100% { left: -2%; }
}
#keyframes barco {
0% { left: -7vw; }
100% { left: 0vw; }
}
#keyframes barco-balanceo {
0% { bottom: -10%;}
50% { bottom: -12%; }
100% { bottom: -10%; }
}
#keyframes interrogacion {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="fondo">
<div class="olasFront"></div>
<div class="bote">
<div id="interrogacion">
</div>
</div>
<div class="olasBack"></div>
</div>
</body>
<!-- Frontal waves -->
</html>
I think you need to use media query as per your width changes
/* If screen size is 1050px wide, or less*/
#media screen and (max-width: 1050px) {
#interrogacion{
margin-left: 20vw;
bottom : 1.8vw;
//change your css as per requirenment
}
}
Related
I am using animations in CSS but it is not working. If I check in the inspect menu it is showing invalid syntax even though the syntax is normal. I have other two animations but they are working fine.
Only a particular animation in which I am trying to adjust the width isn't working.
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.bg-div {
background: url(imgs/sky.png);
height: 100vh;
background-size: 79% 792px;
background-position-y: -332px;
width: 900vw;
}
.sea-div {
background: url(imgs/sea.jpg);
height: 37vh;
position: absolute;
bottom: 0;
width: 900vw;
background-size: 10% 403px;
}
.bg-ani-class {
animation: seaMove linear infinite 3s;
background-repeat: repeat-x;
}
.sea-ani-class {
animation: seaMove linear infinite 6s;
background-repeat: repeat-x;
}
.obst-ani-class {
animation: obstMove linear 5s;
}
.mountain-div {
position: absolute;
top: 10vh;
/* width: 18vh; */
/* height: 20vh; */
left: 108vw;
}
.mountain-div img {
width: 148vh;
}
.hanuman-div {
position: absolute;
top: 28vh;
left: 3vw;
}
.hanuman-div img {
width: 20vw;
}
#gada {
position: absolute;
left: 0;
/* top: 56px; */
transition: 0.1s ease all;
}
.gada-rot {
left: 8vw !important;
transform: rotate(180deg);
top: -22px !important;
}
.laser {
position: absolute;
transform: rotateZ(189deg);
/* top: -14vh; */
left: 282px;
/* width: 45vw !important; */
width: 0% !important;
/* transition: 0.4s ease-out; */
animation: laserAnimation infinite 3s;
}
.dragon-1-div {}
.dragon-2-div {}
/* Animations */
/* These 2 Animations are working */
#keyframes seaMove {
100% {
transform: translateX(-500vw);
}
}
#keyframes obstMove {
0% {
left: 108vw;
}
100% {
left: -100vw;
}
}
/* This animation isn't working */
#keyframes laserAnimation {
from {
width: 0 !important;
}
to {
width: 45vw !important;
}
}
<div class="bg-div bg-ani-class"></div>
<div class="sea-div sea-ani-class"></div>
<div class="hanuman-div">
<img src="imgs/hanuman.png" alt="">
<img src="imgs/gada.png" alt="" id="gada">
<img src="imgs/laserbeam.png" alt="" class="laser">
</div>
<div class="mountain-div">
<img src="imgs/mountain.png" alt="">
</div>
<div class="dragon-1-div"></div>
<div class="dragon-2-div"></div>
It's generally not a good idea to animate width and height. Always try to use composite animations e.g. opacity, transforms. To achieve width animation use scale transform.
Here is a laser show for you:
body {
overflow: hidden;
}
.laser {
position: absolute;
left: 0;
top: 50%;
height: 10px;
width: 100%;
background: #d7272b;
animation: laserAnimation 2s ease-out infinite;
}
.greenLaser {
position: absolute;
left: 0;
top: 0;
height: 10px;
width: 100%;
background: #0063d5;
animation: laserAnimation 2s ease-out infinite;
}
.blueLaser {
position: absolute;
bottom: 0;
left: 0;
height: 10px;
width: 100%;
background: #00d53b;
animation: laserAnimation 2s ease-out infinite;
}
#keyframes laserAnimation {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
<div class="laser">
</div>
<div class="greenLaser">
</div>
<div class="blueLaser">
</div>
I'd like to animate the top of a div which is filled with a blue sea like color.
And I'd like the animation to feint little sea waves. Knowing that my displaying is for a very little resolution (120px width).
I tried with particles-js, and it was cool to learn how to add a motion effect, but it doesn't make my top section looking like sea waves.
And then I tried with CSS, trying to understand some existing code and the best I've done for the moment is that:
:root {
--bg-color: #dfffa9;
--wave-color: #0048ff;
--animation-time: 4s;
--max-height: 15px;
--circle-offset: -1.5%;
--wave-width: 55%;
--height-wave-up: 109%;
--height-wave-down: 100%;
--top-wave-up: 60%;
--top-wave-down: 40%;
--border-radius-right-up: 100% 50%;
--border-radius-left-up: 50% 100%;
}
body {
margin: 0;
overflow: hidden;
background: var(--wave-color);
}
.container {
position: relative;
height: 10vh;
background: var(--bg-color);
}
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: var(--max-height);
background: var(--bg-color);
animation: beWavy var(--animation-time) infinite linear;
}
.wave::before,
.wave::after {
content: "";
display: block;
position: absolute;
border-radius: var(--border-radius-right-up);
width: var(--wave-width);
}
.wave::before {
height: var(--height-wave-up);
background-color: var(--wave-color);
right: var(--circle-offset);
top: var(--top-wave-up);
animation: beWavyBefore var(--animation-time) infinite step-end;
}
.wave::after {
height: var(--height-wave-down);
background-color: var(--bg-color);
left: var(--circle-offset);
top: var(--top-wave-down);
animation: beWavyAfter var(--animation-time) infinite step-end;
}
#keyframes beWavy {
0% {
animation-timing-function: ease-in;
height: var(--max-height);
}
25% {
animation-timing-function: ease-out;
height: 0;
}
50% {
animation-timing-function: ease-in;
height: var(--max-height);
}
75% {
animation-timing-function: ease-out;
height: 0;
}
100% {
animation-timing-function: ease-in;
height: var(--max-height);
}
}
#keyframes beWavyBefore {
25% {
background-color: var(--bg-color);
height: var(--height-wave-down);
top: var(--top-wave-down);
border-radius: var(--border-radius-left-up);
}
75% {
background-color: var(--wave-color);
height: var(--height-wave-up);
top: var(--top-wave-up);
border-radius: var(--border-radius-right-up);
}
}
#keyframes beWavyAfter {
25% {
background-color: var(--wave-color);
height: var(--height-wave-up);
top: var(--top-wave-up);
border-radius: var(--border-radius-left-up);
}
75% {
background-color: var(--bg-color);
height: var(--height-wave-down);
top: var(--top-wave-down);
border-radius: var(--border-radius-right-up);
}
}
<?php
?>
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sea level</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<section class="container">
<div class="wave"></div>
</section>
But 2 waves only seems really repetitve and low cost haha. I want random waves with random starting points.
So if someone could help me understand how it works exactly, thanks.
i want to make a gradient go under my wave effect so when you scroll down the wave fades away by using a gradient.
My CSS code:
section {
width: 100%;
height: 100vh;
}
section .wave:before {
content: '';
width: 100%;
height: 143px;
background: url(images/wave2.png);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
animation: wave-reverse 15s linear infinite;
}
section .wave {
position: absolute;
width: 100%;
height: 143px;
bottom: 0;
left: 0;
background: url(images/wave2.png);
animation: wave 10s linear infinite;
}
section .wave:after {
content: '';
width: 100%;
height: 143px;
background: url(images/wave2.png);
position: absolute;
top: 0;
left: 0;
opacity: 0.6;
animation-delay: -5s;
animation: wave 15s linear infinite;
}
#keyframes wave {
0% {
background-position: 0;
}
100% {
background-position: 1360px;
}
}
#keyframes wave-reverse {
0% {
background-position: 1360px;
}
100% {
background-position: 0;
}
}
.waveGradient {
width: 100%;
top: 100px;
bottom: 0;
background-image: linear-gradient(#429bf4, transparent);
}
My HTML code for this:
<section>
<div class="wave">
</div>
<div class="waveafter"></div>
</section>
images:
this is what its like when you load up the page.
image 1
Gradient goes under the wave image to make it look like it fades away.
Image 2
I did the animation to rotate around a button, I do not know the tags so well, so I'll probably have many errors in my codes: '(
What annoys me today is that it is not rotating in IE11, I tested in Windows 7 and Windows 10, any browser opens normally, until Edge performs as programmed, except IE11,
The URL of the page in question is http://hb1virtual.com.br/Grafica/
Could someone tell me where I'm going wrong?
(there will be many errors, but this one especially, laughs)
HTML
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
<div class="menu">
<div class="marquee">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
CSS
There are some CSS mistakes in your animation code.
I try to add a new css code segment and try to apply it on your web page to make it work for IE 11.
Code:
<!doctype html>
<head>
<title></title>
<style>
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% {-webkit-transform:rotate(-360deg);-webkit-transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
.clockwise {
-webkit-animation: clockwiseSpin 10s infinite linear;
animation: clockwiseSpin 10s infinite linear;
}
#-webkit-keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}#keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="menu">
<div class="clockwise">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
</body>
</html>
Output in IE 11:
Further, you can try to check the code and try to modify it in your site.
You can refer the example below.
JS Fiddle Example
First, you should change your Title from Portuguese to English.
Second, You can always inject code into your html, blocking IE users from seeing your website, redirecting them to download another browser.
Nobody uses IE anyway... It's not solving the problem, it's avoiding the question, but it's a solution.
Cheers
I was wondering if it is possible to hide parts of an image that is positioned with negative px?
Essentially I would like to hide the image part on the very right of the screen that goes past the pink div and purple div. I would also like to hide the image part that goes downwards into the purple part. So only the image on the pink div is visible.
snippet of animation
I have used the animation property to set the positions on page load.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
position: relative;
top: -100px;
left: -100px;
}
100% {
position: relative;
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
position: absolute;
bottom: -100px;
right: -150px;
}
100% {
position: absolute;
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2" /></div>
</div>
<div id="div2">
</div>
</body>
</html>
You need to add position: relative to the parent container (div1 in this case) and overflow:hidden to hide the part of the images which goes outside the div. Also remove the position property from the keyframes because it's not used.
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#div1 {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
overflow: hidden;
}
#dog1 {
animation: fadeIn 3s ease;
animation-fill-mode: forwards;
position: relative;
top: -100px;
left: -100px;
z-index: 1;
}
#keyframes fadeIn {
0% {
top: -100px;
left: -100px;
}
100% {
top: 0px;
left: 0px;
}
}
#div2 {
width: 100%;
height: 500px;
background-color: purple;
z-index: 0;
}
#dog2 {
animation: fadeIn2 3s ease;
animation-fill-mode: forwards;
position: absolute;
bottom: -100px;
right: -100px;
z-index: 1;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: right bottom;
width: 400px;
height: 400px;
}
#keyframes fadeIn2 {
0% {
bottom: -100px;
right: -150px;
}
100% {
bottom: 0px;
right: -50px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation</title>
</head>
<body>
<div id="div1">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/%D7%9B%D7%9C%D7%91_%D7%9C%D7%91%D7%9F_%D7%A7%D7%98%D7%9F.jpg" id="dog1" />
<div id="dog2"><!-- typo here -->
</div>
</div>
<div id="div2">
</div>
</body>
</html>