High Definition Standard Definition Theater
Video id : PL6V96QvOzU
ImmersiveAmbientModecolor: #c9c9c8 (color 2)
Video Format : (720p) openh264 ( https://github.com/cisco/openh264) mp4a.40.2 | 44100Hz
Audio Format: 140 ( High )
PokeEncryptID: d46381eeb17cfe892ea518d0ab4c6870529d40dc40d4d4594ffa4033fea3804beffa4aec495b7823ee830d347ae3982a
Proxy : eu-proxy.poketube.fun - refresh the page to change the proxy location
Date : 1740621359444 - unknown on Apple WebKit
Mystery text : UEw2Vjk2UXZPelUgaSAgbG92ICB1IGV1LXByb3h5LnBva2V0dWJlLmZ1bg==
143 : true
80 Views β€’ Feb 12, 2024 β€’ Click to toggle off description
#css animation
#css
#css animation effects
#css animation tutorial
#html and #css
#html and #css animation
#html #css
#css animation examples
#css transition and animation
#pure html and #css animation
#animation
#css tutorial
#html and #css animation video shorts
#loading animation in html and #css
#css animations
#Codecraft animation website
#Codecraft animation beginner
#latest #css animation effects
#css loader animation
#css border animation
#css animation crash course
#css and html animation creator
#css and html animation
#css animations for websites
#animation with css and html
#css code for animation
#animation using css and html
#html and css animations
#html css cool animations
#create animation with html and css
#create an animation using html and css
#html css keyframe animation
#create animation with css
#creative css and javascript effects and animation
#css animation with js
#css animation with javascript
#html css java animation
#css and javascript animation tutorial
#html code for animation
#html animation code notepad
#css animation on scroll without javascript
#2d animation in css
#3d animation using css
#css cool animation effect
#coding for animation in html
#css effects with code
#best css animation with code
#html animation on scroll
Metadata And Engagement

Views : 80
Genre: People & Blogs
License: Standard YouTube License
Uploaded At Feb 12, 2024 ^^


warning: returnyoutubedislikes may not be accurate, this is just an estiment ehe :3
Rating : 5 (0/12 LTDR)

100.00% of the users lieked the video!!
0.00% of the users dislieked the video!!
User score: 100.00- Masterpiece Video

RYD date created : 2024-02-13T05:37:49.092207Z
See in json
Connections
Nyo connections found on the description ;_; report an issue lol

2 Comments

Top Comments of this video!! :3

@Codecraft001

1 year ago

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS FILE
</title>
<link rel="stylesheet" href="css18.css">
</head>
<body>
<div class="wrap">
<img class="image truck-img"
src="learndesigntutorial.com/wp-content/uploads/2021/03…" alt="">
<img class="image box-img"
src="learndesigntutorial.com/wp-content/uploads/2021/03…" alt="">
<img class="image box-img box-img2"
src="learndesigntutorial.com/wp-content/uploads/2021/03…" alt="">
</div>

1 |

@Codecraft001

1 year ago

CSS :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background:
url(learndesigntutorial.com/wp-content/uploads/2021/03…
no-repeat;
background-size: cover;
background-position: bottom;
background-color: rgba(0,0,0,0.7);
background-blend-mode: overlay;
height: 100vh;
overflow: hidden;
}
.wrap{
position: absolute;
height: 150px;
bottom: 100px;
left: 0;
width: 100%;
}
.image{
width: 150px;
position: absolute;
}
.truck-img{
bottom: 0;
left: -150px;
z-index: 2;
animation: truck 10s linear infinite;
}
@keyframes truck{
40%, 70%{
left: 60%;
}
100%{
left: 100%;
}
}
.box-img{
width: 35px;
z-index: 1;
top: 55%;
left: 60%;
opacity: 0;
animation: box 10s linear infinite;
}
.box-img2{
animation-delay: 1s;
}
@keyframes box{
0%, 40%{
opacity: 0;
left: 55%;
}
50%{
opacity: 1;
left: 60%;
}
60%, 100%{
opacity: 0;
left: 60%;
}
}

1 |

Go To Top