Tag: #Transitions

Web development

CSS Envelope (Open/Close on Hover)

Post author By Lena Stanley
Post date April 23, 2021

Demo:

*to see the animation on the website click here.

To create the CSS Envelope (Open/ Close on Hover) follow the steps below and watch the video tutorial:

Add HTML
Add CSS

Step1.

Add HTML

<div class="envelope">
  <div class="back"></div>
  <div class="letter">
    <div class="text">Invitation</div>
  </div>
  <div class="front"></div>
  <div class="top"></div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

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

.envelope {
  position: relative;
  cursor: pointer;
}

Style the card and envelope:

.back {
  position: relative;
  width:250px;
  height: 200px;
  background-color: #6247aa;
}

.letter {
  position: absolute;
  background-color: #fff;
  width:230px;
  height: 180px;
  top:10px;
  left:10px;
  transition: .2s;
}

.letter:before {
  position: absolute;
  content:"";
  background-color: #333;
  width: 80px;
  height: 80px;
  top:75px;
  left:75px;
}

.letter:after {
  position: absolute;
  content:"";
  width:30px;
  height:30px;
  background-color: #fff;
  top:82px;
  left: 82px;
  box-shadow: 36px 0 #fff, 36px 36px #fff, 0px 36px #fff;
}

.text {
  text-align: center;
  font-size: 17px;
  font-family: arial;
  margin-top:20px;
  font-weight: bold;
}

.text:before, .text:after {
  content:"";
  position: absolute;
  width: 5px;
  border-radius:10px;
  background-color: #333;
  height: 20px;
  top:60px;
}

.text:before {
  left:108px;
  transform: rotate(-25deg);
}

.text:after {
  left:118px;
  transform: rotate(25deg);
}

.front {
  position: absolute;
  border-right: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height:0;
  width:0;
  top:0;
  left:120px;
  z-index:3;
}

.front:before {
  content:"";
  position: absolute;
  border-left: 130px solid #815ac0;
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  height:0;
  width:0;
  top:-100px;
  left:-120px;
}

.front:after {
  content:"";
  position: absolute;
  border-bottom: 105px solid #7251b5;
  border-left: 125px solid transparent;
  border-right:125px solid transparent;
  height:0;
  width:0;
  top:-5px;
  left:-120px;
}

.top {
  position: absolute;
  border-top: 105px solid #9163cb;
  border-left: 125px solid transparent;
  border-right:125px solid transparent;
  height:0;
  width:0;
  top:0;
  transform-origin: top;
  transition: .4s;
}
.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:250px;
  height:10px;
  top:220px;
  border-radius:50%;
}

Add transition on hover:

.envelope:hover .top {
  transform: rotateX(160deg);
}

.envelope:hover .letter {
  transform: translateY(-100px);
  z-index:2;
}

Watch also the video tutorial:

Enjoy coding!

CSS Folded Birthday Card

Post author By Lena Stanley
Post date April 7, 2021

Demo:

*to see the CSS Folded Card on the website click here.

To create the CSS Folded Birthday Card follow the steps below and watch the video tutorial:

Step1.

Add HTML

Front side of the card:

<div class="birthdayCard">
<div class="cardFront"><h3 class="happy">HAPPY BIRTHDAY!</h3>
<div class="balloons">
  <div class="balloonOne"></div>
  <div class="balloonTwo"></div>
  <div class="balloonThree"></div>
  <div class="balloonFour"></div>
</div>
</div>

Step2.

Add CSS

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

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

.birthdayCard {
  position: relative;
  width: 250px;
  height:350px;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: 1s;
}

Style front side of the card:

.cardFront {
  position: relative;
  background-color: #fff;
  width: 250px;
  height:350px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 30px 0 50px rgba(0,0,0,0.4);
  transition: .6s;
}

.happy {
  font-family: Tahoma, sans-serif;
  text-align: center;
  margin:30px; 
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  transition: .1s;
}

.balloons {
  position: absolute;
}

.balloonOne, .balloonTwo, .balloonThree, .balloonFour {
  position: absolute;
  width: 85px;
  height:95px;
  border-radius:50%;
}

.balloonOne {
  background-color: rgb(239, 71, 111, 0.7);
  left:-10px;
  top:50px;
}

.balloonTwo {
  background-color: rgb(6, 214, 160, 0.7);
  left:50px;
  top:20px;
}

.balloonThree {
  background-color: rgb(255, 209, 102, 0.7);
  left:110px;
  top:50px;
}

.balloonFour {
  background-color: rgb(17, 138, 178, 0.7);
  left:170px;
  top:20px;
}

.balloonOne:before, .balloonTwo:before, .balloonThree:before, .balloonFour:before {
  content:"";
  position: absolute;
  width:1px;
  height: 155px;
  background-color: #ffd166;
  top:95px;
  left:43px;
}

.balloonOne:after, .balloonTwo:after, .balloonThree:after, .balloonFour:after {
  content:"";
  position: absolute;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  top:94px;
  left:37px;
}

.balloonOne:after {
  border-bottom: 10px solid #ef476f;
}

.balloonTwo:after {
  border-bottom: 10px solid #06d6a0;
}

.balloonThree:after {
  border-bottom: 10px solid #ffd166;
}

.balloonFour:after {
  border-bottom: 10px solid #118ab2;
}

Step3.

Add HTML

To create the card inside:

 <div class="cardInside">
    <h3 class="back">HAPPY BIRTHDAY!</h3>
    <p>Dear Friend,</p>
    <p>Happy birthday!! I hope your day is filled with lots of love and laughter! May all of your birthday wishes come true.</p>
    <p class="name">xxx</p>
  </div>
</div>

Step4.

Add CSS

Style the card inside:

.cardInside {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height:350px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

p {
  font-family: 'Brush Script MT', cursive;
  margin: 40px;
  color: #333;
}

.name {
  position: absolute;
  left:150px;
  top:200px;
  color: #333;
}

.back {
  font-family: Tahoma, sans-serif;
  color: #333;
  text-align: center;
  margin:30px; 
  outline-color:#333;
  outline-style: dotted;
}

Step5.

Add CSS Transitions

.birthdayCard:hover {
	transform: perspective(2500px) rotate(5deg);
	box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 0 10px 100px rgba(0,0,0,0.5);
}

.birthdayCard:hover .cardFront {
  transform: rotateY(-160deg); 
}

.birthdayCard:hover .happy {
  visibility:hidden; 
}

Watch also the video tutorial:

Enjoy coding!

CSS EASTER EGG ANIMATION/ CSS Hover Transition

Post author By Lena Stanley
Post date March 16, 2021

Demo:

*to see the CSS transition on the website click here.

To create the CSS Easter Animation follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="container">
  <div class="easter">
  <div class="egg">
    <div class="yolk"></div>
  </div>
  <div class="shellBottom">
    <div class="bottom"></div>
  </div>
    <div class="shellTop">
      <div class="hoverMe">Hover Me</div>
      <div class="top"></div>
    </div>
    <div class="shadow"></div>
    <div class="text">Happy Easter!</div>
  </div>
</div>

Step2.

Add CSS

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

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

.container {
  position: relative;
}

.easter {
  position: relative;
  left:-100px;
  top:-100px;
}

Style the egg:

.egg {
  position: absolute;
  width: 136px;
  height: 190px;
  background-color: #fffffc;
  border-radius: 50% 60% 50% 50% / 70% 70% 40% 40%;
  box-shadow: inset -5px -7px rgba(0,0,0,0.1);
  z-index:1;
  top:0;
}

.yolk {
  position: absolute;
  content:"";
  width: 90px;
  height:90px;
  background-color: #ffb703;
  border-radius:50%;
  top:65px;
  left:20px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.yolk:before {
  position: absolute;
  content:"";
  background-color: #333;
  width:7px;
  height:10px;
  border-radius:50%;
  top:35px;
  left:30px;
  box-shadow: 20px 0 #333;
  -webkit-transform-origin: 50%;
  -webkit-animation: blink 2.5s infinite;
}
.yolk:after {
  content:"";
  position: absolute;
  background-color: #fff;
  width:20px;
  height:10px;
  border-radius: 0 0 30px 30px;
  top:50px;
  left:34px;
}

Add the blink animation to the egg’s eyes:

@-webkit-keyframes blink {
    0%, 100% {
        transform: scale(1, .05);
    }
    5%,
    95% {
        transform: scale(1, 1);
    }
}

Style the shell:

.shellBottom {
  background-color: #a2d2ff;
  position: absolute;
  z-index:3;
  width:150px;
  height:77.5px;
  border-radius: 0 0 100px 100px;
  left:-10px;
  top:150px;
  box-shadow: inset -5px -5px rgba(0,0,0,0.1);
}

.shellBottom:before {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  top:-30px;  
}

.shellBottom:after {
  position: absolute;
  content:"";
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:25px;
}

.bottom {
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:-30px;
  left:75px;
}

.bottom:before {
  content:"";
  position: absolute;
  border-bottom: 30px solid #a2d2ff;
  border-left: 25px solid transparent;
  left:25px;
}

.bottom:after {
  content:"";
  position: absolute;
  height:30px;
  width:5px;
  background-color: rgba(0,0,0,0.1);
  left:45px;
}

.shellTop {
  position: absolute;
  background-color: #a2d2ff;
  box-shadow: inset -5px 0 rgba(0,0,0,0.1);
  width:150px;
  height:140px;
  border-radius: 50% 50% 0 0/60% 60% 0 0;
  top:-20px;
  left:-10px;
  z-index:2;
  transition: ease 1s;
}

.shellTop:before, .shellTop:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
}

.shellTop:after {
  left:50px;
}

.top {
  position: absolute;
  height:0;
  width:0;
  border-top: 30px solid #a2d2ff;
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top:140px;
  left:100px;
}

.hoverMe {
  position: absolute;
  font-family:arial black;
  top:60px;
  left:35px;
  color: #bde0fe;
}

Add transition on hover:

.shellTop:hover {
  top:-80px;
}

Style the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.1);
  width:170px;
  height:20px;
  border-radius:50%;
  top:212px;
  left:48px;
}

Add the Easter wishes:

.text {
  position: relative;
  left:-250px;
  font-size:20px;
  font-family: arial black;
  top:100px;
  visibility:hidden;
}

.text:before {
  content:"";
  position: absolute;
  width: 200px;
  height:100px;
  border-radius:30px;
  background-color: #fff;
  left:-25px;
  top:-35px;
  z-index:-1;
}

.text:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-top: 20px solid #fff;
  border-right:35px solid transparent;
  top: 20px;
  left:170px;
}

Add transition on hover to make the wishes visible:

.container:hover .text {
  visibility:visible;
  transition-delay:.2s;
}

To see the CSS Easter Animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Egg Shape and CSS Easter eggs

CSS Paper Plane Animation

CSS Bubble Animation

Tags #Transitions, CSS, hover

Web development

CSS Transition VS. CSS Animation

Post author By Lena Stanley
Post date December 24, 2019

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 Transitions allow changing property values very smoothly, over a given duration. To create a transition effect, you must specify two things:

The CSS property you want to add an effect to
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!