I love water sports – can’t wait to Windsurf again!
Thinking about the wind and the waves I created the Windsurfing animation using just pure CSS.
To see the live output of the animation click here.
To create the animation you’ll need 2 images of the waves in .png format. For your training, you can use mine pictures below which I created in Adobe Photoshop, and then follow the steps below:
- Add HTML
- Add CSS
- Add CSS Animation
Step1.
Add HTML
<div class="container">
<div class="windserfing">
<div class="sail">
<div class="boom"></div>
<div class="mast"></div>
</div>
<div class="board"></div>
<div class="surfer">
<div class="head"></div>
<div class="hair"></div>
<div class="sunglasses"></div>
<div class="top"></div>
<div class="shorts"></div>
<div class="leg"></div>
<div class="leg2"></div>
<div class="arm"></div>
<div class="arm2"></div>
</div>
</div>
<div class="wave1"></div>
<div class="wave2"></div>
</div>
Step2.
Add CSS
Set the colour and the position of the background, container:
body {
background-color: #9bf6ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
position: relative;
}
Style the Sail:
.windsurfing {
position:relative;
animation: surf 2s ease infinite;
}
.sail{
position: relative;
width: 0;
height: 0;
border-top: 280px solid transparent;
border-right: 110px solid rgba(237, 246, 125, 0.95);
border-bottom: 50px solid transparent;
transform-style: preserve-3d;
left:30px;
top:-40px;
z-index:5;
}
.sail:before {
position: absolute;
content:"";
width:65px;
height:5px;
background-color: #F896D8;
border-radius:100px;
top:-130px;
left:50px;
transform: rotate(25deg);
}
.sail:after {
position: absolute;
content:"";
width:123px;
height:5px;
background-color: #F896D8;
border-radius:100px;
top:20px;
left:-7px;
transform: rotate(25deg);
}
.boom {
width: 145px;
height: 150px;
border: solid 10px black;
border-radius: 50%;
top: -125px;
left: -20px;
position: absolute;
transform: rotate3d(0.4, 0.2, 0, 75deg);
box-sizing: border-box;
}
.mast {
position: absolute;
width:5px;
height:360px;
background-color: black;
left:110px;
top:-280px;
border-radius:100px;
z-index:1;
}
.mast:before {
position: absolute;
content:"";
background-color:black;
width:25px;
height:10px;
top:350px;
left:-10px;
border-radius:30px 30px 0 0;
}
Style the Board:
.board {
width:300px;
height: 50px;
position:absolute;
background-color: #724CF9;
border-radius:50%;
left:-60px;
top:300px;
box-shadow: inset 15px -10px 0 #564592;
}
.board:after {
content:"";
position: absolute;
border-radius:0 0 100% 50%;
width:20px;
height:40px;
background-color: #564592;
left:40px;
top:40px;
transform: skew(-25deg);
}
Add the Windsurfer:
.surfer {
position:absolute;
top:0;
left:0;
}
.head {
position:absolute;
background-color: #ffcb69;
border-radius:50%;
width:45px;
height:50px;
top:110px;
left:-55px;
box-shadow: inset 3px 8px 0 black;
}
.head:before {
position:absolute;
content:"";
width:15px;
height:15px;
background-color: #ffcb69;
left:35px;
top:20px;
border-radius: 0 40px;
}
.head:after {
content:"";
position: absolute;
border-radius:50%;
box-shadow: inset 2px 2px 0 black;
width:15px;
height:15px;
top:15px;
left:10px;
}
.sunglasses {
position: absolute;
width: 8px;
height:15px;
border-radius:50%;
background-color: brown;
top:120px;
z-index:5;
left:-15px;
box-shadow: inset 2px 2px 0 black;
}
.sunglasses:before {
content:"";
position:absolute;
width:25px;
height:3px;
background-color:black;
top:5px;
left:-22px;
}
.sunglasses:after {
content:"";
position:absolute;
width:10px;
height:10px;
background-color:black;
border-radius:50%;
top:-10px;
left:-5px;
}
.top {
position:absolute;
width:20px;
height:50px;
border-top: 25px solid #41ead4;
border-left: 35px solid #41ead4;
border-bottom: 30px solid transparent;
border-right: 20px solid transparent;
border-radius:50%;
top:150px;
left:-70px;
}
.shorts {
z-index:5;
position:absolute;
width:45px;
height:40px;
background-color: #CC444B;
top:225px;
left:-60px;
transform: skew(10deg) rotate(-40deg);
border-radius: 30px 0 0 0;
}
.shorts:before {
content:"";
position:absolute;
width:36px;
height:40px;
background-color: #DA5552;
top:7px;
left:8px;
border-radius: 30px 0 0 0;
transform: skew(5deg) rotate(-30deg);
}
.shorts:after {
content:"";
position: absolute;
width:38px;
height:10px;
left:10px;
background-color: #CC444B;
}
.leg {
position:absolute;
width:5px;
height:70px;
background-color: #ffcb69;
top:250px;
left:5px;
transform: rotate(-35deg);
}
.leg:before {
content:"";
position:absolute;
background-color: #ffcb69;
width:30px;
height:10px;
border-radius: 0 30px 0 0;
top:70px;
}
.leg2 {
position:absolute;
background-color: #ffcb69;
width:5px;
height:40px;
top:250px;
left:-31px;
transform: rotate(-35deg);
}
.leg2:before {
content:"";
position: absolute;
width:5px;
height:40px;
background-color: #ffcb69;
transform: rotate(35deg);
top:35px;
left:-11px;
}
.leg2:after {
content:"";
position:absolute;
background-color: #ffcb69;
width:30px;
height:10px;
border-radius: 0 30px 0 0;
top:70px;
left:-22px;
}
.arm {
position: absolute;
background-color: #ffcb69;
width:5px;
height:35px;
top:168px;
left:-5px;
transform: rotate(-45deg);
z-index:-1;
}
.arm:before {
content:"";
position:absolute;
background-color: #ffcb69;
width:5px;
height:35px;
top:5px;
left:11px;
transform: rotate(45deg);
}
.arm:after {
content:"";
position: absolute;
background-color: #ffcb69;
width:15px;
height:15px;
transform: rotate(-45deg);
top:2px;
left:25px;
border-radius: 0 30px 30px 30px;
}
.arm2 {
position:absolute;
background-color: #ffcb69;
width:35px;
height:5px;
top:155px;
left:-21px;
z-index:-1;
}
.arm2:after {
content:"";
position: absolute;
background-color: #ffcb69;
width:15px;
height:15px;
transform: rotate(-45deg);
top:-7px;
left:40px;
border-radius: 0 30px 30px 30px;
}
.hair {
position:absolute;
background-color: black;
border-radius:50%;
width:15px;
height:15px;
top:97px;
left:-40px;
}
.hair:before {
content:"";
position:absolute;
background-color: black;
border-radius:50%;
width:12px;
height:12px;
left:12px;
top:6px;
}
and add the Waves:
.wave1, .wave2 {
height: 300px;
position: absolute;
width: 1000px;
z-index: 99;
left: -400px;
top:280px;
opacity:0.6;
}
.wave1 {
background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe3-1.png?w=1024') repeat-x;
-webkit-animation: wave-animation1 8.7s infinite linear;
-moz-animation: wave-animation1 8.7s infinite linear;
-o-animation: wave-animation1 8.7s infinite linear;
animation: wave-animation1 8.7s infinite linear;
}
.wave2 {
background: url('https://lenadesign.org/wp-content/uploads/2020/05/vawe1.png?w=1024') repeat-x;
-webkit-animation: wave-animation1 6.3s infinite linear;
-moz-animation: wave-animation1 6.3s infinite linear;
-o-animation: wave-animation1 6.3s infinite linear;
animation: wave-animation1 6.3s infinite linear;
}
Step3.
Add CSS Animation
To Surf:
@keyframes surf {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px) rotate(-7deg);}
60% {transform: translateY(-15px) rotate(3deg);}
}
and for the Waves:
@-webkit-keyframes wave-animation1 {
0% { background-position: 0 0; }
100% { background-position: 1601px 0; }
}
@-moz-keyframes wave-animation1 {
0% { background-position: 0 0; }
100% { background-position: 1601px 0; }
}
@-o-keyframes wave-animation1 {
0% { background-position: 0 0; }
100% { background-position: 1601px 0; }
}
@keyframes wave-animation1 {
0% { background-position: 0 0; }
100% {background-position: 1601px 0;}
}
To see the live output of the animation go to lenastanley.com.
Enjoy coding!