Categories
CSS Web development

CSS Spooky House Animation

CSS Spooky House Animation

Demo:

*to see the CSS Spooky House animation on the website click here.

What do you need to do?

To create the CSS Spooky House animation follow the steps below and watch the video tutorial:

  1. Add HTML.
  2. Add CSS.
  3. Add CSS Animation.

Step 1.

Add HTML

<div class="spooky-house">
  <div class="content-circle">
    <div class="house">
      <div class="porch"></div>
      <div class="first-floor"></div>
      <div class="second-floor"></div>
      <div class="roof"></div>
      <div class="door"></div>
      <div class="small-windows"></div>
      <div class="big-window"></div>
      <div class="frames"></div>
    </div>
    <div class="moon"></div>
    <div class="rain">
      <div class="dropOne"></div>
      <div class="dropTwo"></div>
      <div class="dropThree"></div>
      <div class="dropFour"></div>
      <div class="dropFive"></div>
    </div>
  </div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spooky-house {
  position: relative;
}

.content-circle {
  position: relative;
  width: 450px;
  height: 450px;
  overflow: hidden;
  background-color:#212F3C;
  border-radius:50%;
}

.content-circle:before {
  content:"";
  position: absolute;
  width:450px;
  height:200px;
  top:300px;
  border-radius:50% 50% 0 0;
  background-color: #000;
}
CSS Spooky House

Style the house:

.house {
  position:absolute; 
  width: 120px;
  height:150px;
  background-color:black;
  left:180px;
  top:160px;
  transform:rotate(5deg);
  z-index:2;
}

.house:before {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 30px solid black;
  border-right: 50px solid transparent;
  left:115px;
  top:70px;
  transform:rotate(5deg);
}

.house:after {
  content:"";
  position:absolute;
  width:5px;
  height:65px;
  background-color:black;
  left:145px;
  top:95px;  
}

.porch {
  position: absolute;
  width:30px;
  height:100px;
  background-color:black;
  left:-20px;
  top:55px;
  transform:rotate(-10deg);
}
.porch:before {
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid black;
  border-left: 40px solid transparent;
  left:-35px;
  top:45px;
}

.porch:after {
  content:"";
  position: absolute;
  position:absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid black;
  left:-5px;
  top:-25px;
}

.first-floor {
  position: absolute;
  transform: rotate(-10deg);
  background-color: black;
  width:5px;
  height:45px;
  left:-37px;
  top:125px;
}

.first-floor:before {
  content:"";
  position: absolute;
  background-color: #000;
  width:85px;
  height:90px;
  top:-150px;
  left:50px;
}

.first-floor:after {
  content:"";
  position: absolute;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  border-bottom: 50px solid black;
  top:-199px;
  left:40px;
}

.second-floor {
  position: absolute;
  background-color: black;
  width:35px;
  height:100px;
  transform: rotate(3deg);
  top:-70px;
  left:70px;
}

.second-floor:before {
  content:"";
  position: absolute;
  background-color: black;
  width:20px;
  height:100px;
  left:33px;
  top:40px;
  transform: rotate(-3deg);
}

.second-floor:after {
  content:"";
  position:absolute; 
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  top:12px;
  left:15px;
}

.roof {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 30px solid black;
  left:65px;
  top:-95px;
}

.roof:before {
  content:"";
  position: absolute;
  width:6px;
  height:20px;
  background-color: black;
  top:5px;
  left:10px;
  box-shadow: 20px 35px black;
}

.roof:after {
  content:"";
  position: absolute;
  width:6px;
  height:20px;
  background-color: black;
  transform: rotate(-10deg);
  left:-110px;
  top:35px;
  box-shadow: -27px 97px black;
}
CSS Spooky House

Add windows and the door:

.door {
  position: absolute;
  background-color: #ffd166;
  width:30px;
  height:50px;
  transform: rotate(-5deg);
  border-radius:30px 30px 0 0;
  box-shadow: inset -10px 5px rgba(0,0,0,0.5);
  top:90px;
  left:40px;
}

.door:before {
  content:"";
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  box-shadow: inset -5px 2px rgba(0,0,0,0.5);
  width:20px;
  height:30px;
  left:-40px;
  transform: rotate(-3deg);
}

.door:after {
  content:"";
  position: absolute;
  background-color: #ffd166;
  box-shadow: inset -5px 2px rgba(0,0,0,0.5);
  border-radius:30px 30px 0 0;
  width:20px;
  height:30px;
  left:45px;
  transform: rotate(3deg);
}

.small-windows {
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  width:13px;
  height:25px;
  left:100px;
  top:-20px;
  box-shadow:-19px -40px #ffd166, inset -4px 2px rgba(0,0,0,0.5);;
}

.small-windows:before {
  content:"";
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  width:13px;
  height:25px;
  transform: rotate(-7deg);
  left:-60px;
  top:50px;
  box-shadow:-60px 20px #ffd166;
}

.big-window {
  position: absolute;
  background-color: #ffd166;
  border-radius:30px 30px 0 0;
  transform: rotate(-7deg);
  width:30px;
  height:40px;
  top:-35px;
  left:10px;
}

.big-window:before, .big-window:after {
  content:"";
  position: absolute;
  background-color: black;
}

.big-window:before {
  height: 40px;
  width:2px;
  left:15px;
  box-shadow: 13px 55px black, -47px 80px black, -32px 120px black;
}

.big-window:after {
  height:2px;
  width:40px;
  top:22px;
  box-shadow: 10px 58px black, -45px 78px black, -30px 120px black;
}

.frames {
  position: absolute;
  width:2px;
  height: 40px;
  background-color: black;
  top:-65px;
  left:86.5px;
  box-shadow: 19px 40px black, 7px 150px black;

}

.frames:before {
  content:"";
  position: absolute;
  height:2px;
  width:30px;
  background-color: black;
  top:17px;
  left:-10px;
  box-shadow: 10px 40px black, 5px 150px black;
}
Spooky House

Style the Moon:

.moon {
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  background-color: #95A5A6;
  z-index:-7;
  left:80px;
  top:40px;
  box-shadow:inset 7px -7px 0 rgba(0,0,0,0.09);
}
.moon:after {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:40px;
  height:40px;
  top:100px;
  left:30px;
}
.moon:before {
  content:"";
  position:absolute;
  border-radius:50%;
  background-color:rgba(0,0,0,0.09);
  box-shadow:inset -5px 5px 0 rgba(0,0,0,0.09);
  width:30px;
  height:30px;
  top:50px;
  left:45px;
}
CSS Hounted house

Add the rain:

.rain {
  position: absolute;
  z-index:5;
}

.rain:before {
content:"";
position: absolute;
width: 450px;
height: 450px;
background: #fff;
opacity: 0; 
animation: lighting 3s linear infinite;
}

.dropOne, .dropTwo, .dropThree, .dropFour, .dropFive {
  position: absolute;
  background-color: rgba(211, 211, 211,0.3);
  height: 10px;
  width: 1px;
  top:0;
  box-shadow: 0 -270px rgba(211, 211, 211,0.3), -50px -50px rgba(211, 211, 211,0.3), -50px -150px rgba(211, 211, 211,0.3),50px -395px rgba(211, 211, 211,0.3), 50px -200px rgba(211, 211, 211,0.3),50px -100px rgba(211, 211, 211,0.3), 100px -400px rgba(211, 211, 211,0.3), 100px -320px rgba(211, 211, 211,0.3),100px -150px rgba(211, 211, 211,0.3),150px -200px rgba(211, 211, 211,0.3), 200px -100px rgba(211, 211, 211,0.3), 200px -370px rgba(211, 211, 211,0.3),250px -330px rgba(211, 211, 211,0.3),250px -220px rgba(211, 211, 211,0.3),300px -70px rgba(211, 211, 211,0.3), 300px -140px rgba(211, 211, 211,0.3),300px -300px rgba(211, 211, 211,0.3);
}

.dropOne {
  animation: rain 1.5s linear infinite;
  left:100px;
}

.dropTwo {
  left:-50px;
  animation: rain 1.2s linear infinite;
}

.dropThree {
  left:50px;
  animation: rain 1.7s linear infinite;
}

.dropFour {
  left:150px;
  animation: rain 1.4s linear infinite;
}

.dropFive {
  left:80px;
  animation: rain 1.3s linear infinite;
}

Step 3.

Add CSS Animation

Animate the rain:

@keyframes rain {
  0% {transform: translateY(0);}
  100% {transform: translateY(1000px);}
}

@keyframes lighting {
0% {opacity: 0;}
10% {opacity: 0;}
11% {opacity: 1;}
14% {opacity: 0;}
20% {opacity: 0;}
21% {opacity: 1;}
24% {opacity: 0;}
104% {opacity: 0;}
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Halloween Animations

Pure CSS Halloween Pumpkin/ Jack O Lantern

CSS Halloween Ghost Animation

Categories
CSS JavaScript Web development

What time is it? – CSS Analog Clock Animation

css analog clock

Demo:

*to see the CSS Analog Clock on the website click here.

What do we need to do?

First, you need to have a clock face image (you can use this one below), and then follow three steps:

Clock Face
  1. Add HTML
  2. Add CSS
  3. Add JavaScript (set the current time)

Step 1.

We need to create a clock face with hours, minutes, and seconds:

 <div class="clock">
  <div class="hour">
   <div class="hr" id="hr"></div>
  </div>
  <div class="minutes">
   <div class="min" id="min"></div>
  </div>
  <div class="seconds">
   <div class="sec" id="sec"></div>
  </div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #008080;        
}

Style the clock:

.clock {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 350px;
 height: 350px;
 background: #8c2f39 url(https://lenadesignorg.files.wordpress.com/2020/01/clock-2.png?w=344);
 border-radius: 50%;
 border: 20px solid #b23a48; 
}

.clock:before {
 content: '';
 position: absolute;
 width: 15px;
 height: 15px;
 background-color: #333;
 border: 2px solid #8c2f39;
 border-radius: 50%;
 z-index:10;
}

.hour, .minutes, .seconds {
 position: absolute;
}

.hour, .hr {
 width: 160px;
 height: 160px;
}

.minutes, .min {
 width: 190px;
 height: 190px;
}

.seconds, .sec {
 width: 230px;
 height: 230px;
}

.hr,.min,.sec {
 display: flex;
 justify-content: center;
 position: absolute;
 border-radius: 50%;
}

.hr:before {
 content: '';
 position: absolute;
 width: 8px;
 height: 80px;
 background: #848484;
 border-radius: 6px 6px 0 0;
}

.min:before {
 content: '';
 position: absolute;
 width: 4px;
 height: 90px;
 background-color: #d6d6d6;
 border-radius: 6px 6px 0 0;
}

.sec:before {
 content: '';
 position: absolute;
 width: 2px;
 height: 150px;
 background-color: red;
 border-radius: 6px 6px 0 0;
}

Step 3.

Add JavaScript

Set the current time.

 const deg = 6;
 const hr = document.querySelector("#hr");
 const mn = document.querySelector("#min");
 const sc = document.querySelector("#sec");
 setInterval(() => {
  let day = new Date();
  let hh = day.getHours() * 30;
  let mm = day.getMinutes() * deg;
  let ss = day.getSeconds() * deg;
  hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
  mn.style.transform = `rotateZ(${mm}deg)`;
  sc.style.transform = `rotateZ(${ss}deg)`;
 })


function initLocalClocks() {
  // Get the local time using JS
  var date = new Date;
  var seconds = date.getSeconds();
  var minutes = date.getMinutes();
  var hours = date.getHours();
  var hands = [
    {
      hand: 'hr',
      angle: (hr * 30) + (min / 2)
    },
    {
      hand: 'mn',
      angle: (mn * 6)
    },
    {
      hand: 'sc',
      angle: (sc * 6)
    }
  ];
  for (var j = 0; j < hands.length; j++) {
    var elements = document.querySelectorAll('.' + hands[j].hand);
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
        elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
        // If this is a minute hand, note the seconds position (to calculate minute position later)
        if (hands[j].hand === 'mn') {
          elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);
        }
    }
  }
}

To see the CSS Analog Clock on the website visit: lenastanley.com

Enjoy coding!

Read also:

CSS & JavaScript Digital Clock

JavaScript – Time and date

HTML5 Canvas Analog Clock

Categories
CSS Web development

CSS Shake Animation

Learn how to shake/wiggle an image and the text with CSS.

CSS Shake Animation
*to see the animation on the website click here.

Let’s shake It!

Shake the Image and the text:

Step 1.

Add HTML

<div class="shakeAnimation">
<h1 class="shake">Shake it!</h1>
<div class="jelly"><img src="https://lenadesign.org/wp-content/uploads/2021/04/jelly.png"></div>
<div class="plate"></div>
</div>

Step 2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2e8cf;
  height: 100vh;
}


.shakeAnimation {
  position: relative;
}

.jelly {
  position: relative;  
}
.shake {
  position: relative;
}

Style the plate:

.plate {
  position: relative;
  width:150px;
  height: 5px;
  border: 5px solid #000;
  border-radius:20px;
  top:-32px;
  left:-5px;
  z-index:1;
  background-color: #ede7e3;
}

Add :hover selector:

.jelly:hover {
  animation: shake 1s ease infinite;
}

.shake:hover {
  animation: shake 1s ease infinite;
}

Step 3.

Add CSS Animation

@keyframes shake {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

To see the animation on the website go to: lenastanley.com

Enjoy coding!

Read also:

CSS Animation- Hinge Effect

CSS Bouncing Text Animation

Categories
CSS Web development

CSS Transition VS. CSS Animation

You might think transitions and animations refer to the same thing, but they don’t. The CSS Transition can not change CSS properties which CSS Animation can do.

CSS transiton vs CS animation

CSS Transitions allow changing property values very smoothly, over a given duration. To create a transition effect, you must specify two things:

  1. The CSS property you want to add an effect to
  2. The duration of the effect

Note: If the duration is not specified, the transition will not occur (default 0).

Example:

Hover over the div element (square) below, to see the transition effect (<div> element is changing the width from 100px to 200px). 

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  transition: width 1s;
}

.square:hover {
  width: 200px;
}
</style>
</head>
<body>

<p>Hover over the square:</p>
<div class="square"></div>

</body>
</html>

Output:

Hover over the square:

Most often you can see transitions used on hover states, or when information on a page is added or removed. The hover states may be a subtle change in font color and information on the page may fade from invisible to visible. 

CSS Animations are a more powerful alternative to transitions. Rather than rely on a change from one beginning state to an end state. 

Where a transition goes only from A to B, the animation can go from A, B, C to D. Or any number of stages as needed. (To see the basics of CSS Animations click here.)

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-2;
  animation-duration: 3s;
}

@keyframes example-2 {
  0%   {left:0px; top:0px;}
  25%  {left:100px; top:0px;}
  50%  {left:100px; top:100px;}
  75%  {left:0px; top:100px;}
  100% {left:0px; top:0px;}
}
</style>
</head>
<body>

<div class="square"></div>

</body>
</html>   

Output:

Click on the square to repeat the animation.




The CSS Transition is for creating a smooth transition from one state to another, and the CSS Animation is for a more complex series of movements. 

Enjoy coding!

Read also:

How to add custom fonts to HTML?

CSS cubic-bezier() Function

CSS Sticky Element

Categories
CSS Web development

Introduction to CSS Animation

Animation is a great way to make your web page more attractive. CSS animation property allows the animation of HTML elements without using JavaScript.

CSS Animation Introduction

What is a CSS Animation?

An animation lets an element gradually change from one style to another one. You can change as many CSS  properties you want, as many times you want. To use CSS animation, you must first specify some keyframes for the animation. 

The CSS animation property is shorthand of the following properties:

@keyframes

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-timing-function

animation-fill-mode

The @keyframes Rule

The main component of CSS Animation is @keyframes – the CSS rule where animation is created. Inside @keyframes, you can define the stages and settings of the animation.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1 {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  animation-name: example-1;
  animation-duration: 4s;
}

@keyframes example-1 {
  from {background-color: #2a9d8f;}
  to {background-color: #e9c46a;}
}
</style>
</head>
<body>

<div class="example-1"></div>

</body>
</html>

Note: The animation will finish in 4 seconds. It will gradually change the background color of the <div> element from “green” to “yellow”. After the animation, the square changes back to its original color.

Output:


Click on the square to repeat the animation.

The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0 seconds.

The following example will change the background and the position of the <div> element when the animation is 50% complete, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-2;
  animation-duration: 4s;
}

@keyframes example-2 {
  0%   {background-color:#2a9d8f; left:0px;}
  50%  {background-color:#f4a261; left:200px;}
  100% {background-color:#2a9d8f; left:0px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-delay property specifies a delay for the start of an animation.

Example (the animation will start with 2 seconds delay):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-3;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example-3 {
  0%   {background-color:#2a9d8f; left:0px;}
  50%  {background-color:#f4a261; left:200px;}
  100% {background-color:#2a9d8f; left:0px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-iteration-count property specifies the number of times an animation should run. Using the value “infinite” you will make the animation continue forever.

Example (the animation will repeat 3 times):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-3;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example-3 {
  0%   {background-color:#2a9d8f; left:0px;}
  50%  {background-color:#f4a261; left:200px;}
  100% {background-color:#2a9d8f; left:0px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-direction property specifies whether the animation should be played forward, backward, or in alternate cycles.

Demo:

The animation-direction property can have the following values:

normal (default) – the animation is played as normal (forward).
reverse – the animation is played in the reverse direction (backward).
alternate – the animation is played in forward first, then backward.
alternate-reverse – the animation is played backward first, then forward.

Example (using the “reverse” value):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  left:200px;
  animation-name: example-5;
  animation-duration: 4s;
  animation-direction: reverse; 
}
@keyframes example-5 {
  0%   {background-color:#2a9d8f; left:200px;}
  25%  {background-color:#e76f51; left:0px;}
  50%  {background-color:#e9c46a; left:200px;}
  75%  {background-color:#f4a261; left:0px;}
  100% {background-color:#2a9d8f; left:200px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

The animation-timing-function property specifies the speed curve of animation.

The animation-timing-function property can have the following values:

ease – specifies an animation with a slow start, then fast, then and slowly. This is the default.

linear – specifies an animation with the same speed from start to end.  

ease-in – specifies an animation with a slow start.  

ease-in-out – specifies an animation with a slow start and end. 

CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

The animation-fill-mode property specifies a style for the target element when the animation is not playing. 

The animation-fill-mode property can have the following values:

none – the default one. The animation will not apply any styles to the element before or after it is executing. 

forwards– the element will retain the style values that are set by the last keyframe.

backwards– the element will get the style values that are set by the first keyframe.

both – the animation will follow the rules for both forwards and backwards, extending the animation properties in both directions. 

Example(square will move 200px to the left and will stay in this position):

<!DOCTYPE html>
<html>
<head>
<style>
.square {
  width: 100px;
  height: 100px;
  background-color: #2a9d8f;
  position: relative;
  animation-name: example-6;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes example-6 {
  0%   {background-color:#2a9d8f; left:0px;}
  100% {background-color:#2a9d8f; left:200px;}
}

</style>
</head>
<body>

<div class="square"></div>

</body>
</html>

Output:


Click on the square to repeat the animation.

I hope you find it useful.

Enjoy coding!

Read also:

CSS Selectors

CSS Flexbox

CSS Columns