Categories
CSS Web development

CSS animation Property

CSS animation Property

The CSS animation property is a shorthand property for:

animation-name property

animation-duration property

animation-timing-function property

animation-delay property

animation-iteration-count property

animation-direction property

animation-fill-mode property

animation-play-state property

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: move 4s infinite;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

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

</body>
</html>

Move an element from 0px to 250px left. The animation lasts for 4 seconds. It then starts over again, and go on forever (infinite):

Output:


Syntax:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name – defines the name of the keyframe you want to bind to the selector.

animation-duration – defines how many seconds or milliseconds an animation takes to complete.

animation-timing-function – defines the speed curve of the animation.

animation-delay – defines a delay before the animation will start.

animation-iteration-count – defines how many times an animation should be played.

animation-direction – defines whether or not the animation should play in reverse on alternate cycles.

animation-fill-mode – defines what values are applied by the animation outside the time it is executing.

animation-play-state -defines whether the animation is running or paused.

Read also:

Introduction to CSS Animation

CSS Transition VS. CSS Animation

CSS Reference

Categories
CSS Web development

CSS animation-timing-function Property

CSS animation-timing-function Property

The CSS animation-timing-function property defines the speed curve of an animation.

Demo:

linear
ease
ease-in
ease-out
ease-in-out
steps

The speed curve specifies the time an animation uses to change from one set of CSS styles to another (the speed curve is used to make the changes smoothly).

Syntax:

animation-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n);

linear – the animation has the same speed from start to end.

ease (default) – the animation has a slow start, then fast, before it ends slowly.

ease-in – the animation has a slow start.

ease-out – the animation has a slow end.

ease-in-out – the animation has both a slow start and a slow end.

step-start – equivalent to steps(1, start).

step-end – equivalent to steps(1, end).

steps (int, start | end) – define a stepping function, with two parameters. The first parameter defines the number of intervals in the function. The second parameter (optional), is either the value “start” or “end”, and defines the point at which the change of values occur within the interval.

cubic-bezier – specify your own values in the cubic-bezier function
(numeric values from 0 to 1).

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: move 5s infinite;
  animation-timing-function: linear;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Play an animation with the same speed from beginning to end:


Enjoy coding!

Read also:

CSS animation-direction Property

CSS animation-name Property

Categories
CSS Web development

How to use CSS steps() Function ?/ CSS typing effect

CSS Typewritting

The CSS steps() define a stepping function, with two parameters.

The first parameter defines the number of intervals in the function. The second parameter, which is optional, is either the value “start” or “end”, and defines the point at which the change of values occur within the interval.

Note: If you do not specify the second parameter, it is given the value “end”.

Example1:

<!DOCTYPE html>
<html>
<head>
<style> 
#square1 {
  width: 100px;
  height: 50px;
  background: #2a9d8f;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  animation: mymove 5s infinite;
  animation-timing-function: steps(5,end);
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

<div id="square1">steps</div>

</body>
</html>

Output:

steps

Example2:

CSS Typing effect:

<!DOCTYPE html>
<html>
<head>
<style> 
body {
  display: flex;
  justify-content:center;
  height: 100vh;
  align-items: center;  
  background-color: #faedcd;
}

.text-container {
  position: relative;
}

.a, .b {
  font-size: 50px;
  font-family: 'Courier New', monospace;
  letter-spacing: 4px;
  position: relative;
  line-height:.2;
}

.a:before, .b:before {
  content:"";
  position: absolute;
  background-color: #faedcd;
  height: 55px;
  top:-14px;
  left:-2px;
}

.a:before {
  width:220px;
  animation: move 2s steps(6,end) forwards 1s;
}


@keyframes move {
  0% {transform: translateX(0);opacity:1;}
  80% {transform: translateX(201px);opacity:1;}
  100% {transform: translateX(201px); opacity:0;}
}

.a:after, .b:after {
  content:"|";
  font-weight: 100;
  left:-5px;
  top:-2px;
  position: absolute;
}

.a:after {
  animation: move 2s steps(6,end) forwards 1s;
}

.b:before {
  width:420px;
  animation: moveTwo 4s steps(12,end) forwards 3.2s;
}

.b:after {
  opacity:0;
  animation: moveTwo 4s steps(12,end) forwards 3.2s, blink .7s ease infinite 6.5s;
}

@keyframes moveTwo {
  0% {transform: translateX(0);opacity:1;}
  80% {transform: translateX(411px);opacity:1;}
  100% {transform: translateX(411px); opacity:1;}
}

@keyframes blink {
  from { opacity: 1; }	
	to { opacity: 0; }
}
</style>
</head>
<body>
    
<div class="text-container">
  <p class="a">HELLO!</p>
  <p class="b">HOW ARE YOU?</p>
</div>

</body>
</html>

Output:

*to see the animation on the website click here.

*for the best animation effect choose the monospace font.

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

HTML & CSS Clock Animation

JS Typing Effect

CSS Slide Text Animation/ Slide Effect

Categories
CSS Web development

CSS animation-play-state Property

CSS animation-play-state Property

The CSS animation-play-state property defines whether the animation is running or paused.

Demo:

Click the buttons to Play/Pause the animation:




Syntax:

animation-play-state: paused|running;

paused – defines that the animation is paused.

running (default) – defines that the animation is running.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: move-right 4s infinite;
}

.square:hover {
  animation-play-state: paused;
}

@keyframes move-right {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

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

</body>
</html>

Output:

Hover over the square to stop the animation:


Enjoy coding!

Categories
CSS Web development

CSS animation-name Property

CSS animation-name Property

The CSS animation-name property defines a name for the @keyframes animation.

Syntax:

animation-name: keyframe name|none;

name – defines the name of the keyframe you want to bind to the selector.

none (default) – defines that there will be no animation.

Example:

Defines a name for the @keyframes animation:

<!DOCTYPE html>
<html>
<head>
<style>

.square-1 {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: #2a9d8f;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-name: move;
  animation-duration: 4s;
}    
@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

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

</body>
</html>

Output:

1

Click on the square to repeat the animation.


Enjoy coding!

Read also:

CSS animation Property

CSS animation-duration Property

Categories
CSS Web development

CSS animation-fill-mode Property

CSS animation-fill-mode Property

The CSS animation-fill-mode property defines a style for the element when the animation is not playing (before it starts, after it ends, or both).

Syntax:

animation-fill-mode: none|forwards|backwards|both;

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

forwards – the element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count).

backwards – the element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period.

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

Example1:

<!DOCTYPE html>
<html>
<head>
<style>

.square-1, .square-2 {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: #2a9d8f;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: move;
}
    
.square-1 {
  animation-duration: 4s;      
  animation-fill-mode: none;
}
.square-2 {
  animation-duration: 4s;  
  animation-fill-mode: forwards;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

<div class="square-1">1</div>
<div class="square-2">2</div>

</body>
</html>

Output:

Square 1 (animation-fill-mode: none;) after the animation cycle will back to the beginning position. Square 2 (animation-fill-mode: forwards;) will retain the style values from the last keyframe when the animation ends.

1
2

Click on the square to repeat the animation.


Example2:

<!DOCTYPE html>
<html>
<head>
<style>

.square-1, .square-2 {
  width: 100px;
  height: 100px;
  margin: 5px;
  background: #2a9d8f;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: move;
  animation-delay: 1s;
}
    
.square-1 {
  animation-duration: 4s;      
  animation-fill-mode: backwards;
}
.square-2 {
  animation-duration: 4s;  
  animation-fill-mode: both;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

<div class="square-1">1</div>
<div class="square-2">2</div>

</body>
</html>

Output:

1
2

Click on the square to repeat the animation.


Enjoy coding!

Read also:

CSS Transition

CSS animation-timing-function Property

Categories
CSS Web development

CSS animation-direction Property

CSS animation-direction Property

The CSS animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.

Demo:

Syntax:

animation-direction: normal|reverse|alternate|alternate-reverse;

normal (default) – the animation is played as normal (forwards).

reverse – the animation is played in the reverse direction (backwards).

alternate – the animation is played forwards first, then backwards.

alternate-reverse – the animation is played backwards first, then forwards.

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.square {
  width: 100px;
  height: 100px;
  background: #2a9d8f;
  position: relative;
  animation: move 4s infinite;
  animation-direction: reverse;
}

@keyframes move {
  from {left: 0px;}
  to {left: 250px;}
}
</style>
</head>
<body>

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

</body>
</html>

Output:


Enjoy coding!

Read also:

How to use CSS steps() Function ?/ CSS typing effect

CSS animation-play-state Property

CSS animation-name Property

Categories
#SVG Web development

SVG Stroke & Fill Animation

Some time ago we went through the tutorial SVG Path Drawing Animation, today we can go a bit further and learn how to fill our strokes.

SVG Fill Animation

Demo:

*to see the live output of the animation on the website click here.

Step1.

Add SVG

To create the animation you need to make sure that your SVG shape/path has a stroke. To see how to create basic shapes using SVG click here.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.58 239.81"><defs><style>.cls-1,.cls-6{fill:#1d1d1b;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5{stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}.cls-2{fill:#ededed;}.cls-3{fill:#dadada;}.cls-4{fill:#b2b2b2;}.cls-5{fill:none;stroke-linecap:round;}.cls-6{font-size:48px;font-family:MyriadPro-Regular, Myriad Pro;}</style></defs><title>css-2</title><g id="computer">
  
  <path class="cls-1" d="M73.18,2.5H247.61a29.13,29.13,0,0,1,29.13,29.13V150.15a0,0,0,0,1,0,0H44a0,0,0,0,1,0,0V31.63A29.13,29.13,0,0,1,73.18,2.5Z"/><polygon class="cls-2" points="263.08 137.22 58.68 137.22 58.31 26.04 262.71 26.04 263.08 137.22"/><path class="cls-3" d="M44.07,150.15H276.54a0,0,0,0,1,0,0v9a15.4,15.4,0,0,1-15.4,15.4H59.47a15.4,15.4,0,0,1-15.4-15.4v-9a0,0,0,0,1,0,0Z"/><circle class="cls-1" cx="159.29" cy="163.44" r="5.91"/><polygon class="cls-4" points="140.35 174.79 130.22 223.48 191.34 223.48 180.55 175.12 140.35 174.79"/><rect class="cls-4" x="107.91" y="224.34" width="101.64" height="9.15" rx="4.58"/><line class="cls-5" x1="2.5" y1="237.31" x2="201.58" y2="237.31"/><line class="cls-5" x1="267.31" y1="237.31" x2="330.08" y2="237.31"/><path class="cls-5" d="M472.26,525.58" transform="translate(-105.44 -288.27)"/><line class="cls-5" x1="214.5" y1="237.31" x2="253.49" y2="237.31"/></g>
  
  <g id="html"><text class="cls-6" transform="translate(105.71 98.8)"><tspan xml:space="preserve">  &lt;/&gt;</tspan></text></g></svg>

Step2.

Add CSS

.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6 {
  stroke-dasharray: 1650;
  stroke-dashoffset: 1650;
  animation: draw 3.5s linear forwards;	
}

#html {
  position: absolute;
  transform: translateX(10px);
}

svg {
  position: absolute;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 70%;
  fill-opacity: 0;
  
}

Step3.

Add CSS Animation

@keyframes draw {
          0% {
            stroke-dashoffset: 1650;
            fill-opacity: 0;
            }
          75% {
            stroke-dashoffset: 0;
            fill-opacity: 0;
          }
          95% {
            stroke-dashoffset: 0;
          }
          100% {
            fill-opacity: 1;
            stroke-dashoffset: 0;
          }
        }

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Read also:

SVG Handwriting Animation

Baggage Scan /SVG & JavaScript Animation

Round text animation on Scroll

Categories
#SVG Web development

SVG Path Drawing Animation

Path Drawing Animation

The <path> element is used to define a path. It can draw anything you like!

Demo:

To see the live output of the animation on the website click here.

To create SVG Path Drawing Animation we’ll use the same SVG path from the tutorial – SVG Draw on Scroll (which I created in Adobe Illustrator).

Step1.

Add HTML

Get an SVG path (make sure that your shape has a stroke).

SVG Path drawing
<svg id="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.43 311.23"><defs><style>.cls-1{fill:none;stroke:#be1622;stroke-miterlimit:10; }</style></defs><title>heart</title><path class="cls-1" d="M340.67,131.25c18.71-30.63,56.59-48.3,92.07-43s66.5,33.36,75.38,68.13c6.22,24.37,2.19,50.32-5.52,74.26-3.88,12.06-8.72,23.89-15.53,34.57s-15.51,20.05-24.35,29.15a861.3,861.3,0,0,1-120.45,103c-32.42-26.2-66.67-45.07-97.36-71.12-14.78-12.55-27.69-27.18-39.75-42.36-15.45-19.44-29.86-40.37-36.88-64.19-8.22-27.87-5.39-59.21,9.37-84.24C194.56,106.85,227,88,260.28,87.45s63.31,15.29,81.13,43.43Z" transform="translate(-163.24 -86.84)"/></svg>

Step2.

Add CSS

We will use the stroke-dasharray property for creating dashes in the stroke of SVG shapes, and also a stroke-dashoffset property to define the location along an SVG path where the dash of a stroke will begin.

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

svg {
  width: 100%;
  max-width: 400px;
  padding: 150px;
  
}

.cls-1{
       stroke-width: 3px;
       stroke-dasharray: 1200;
       stroke-dashoffset: 1200;
       animation: draw 3s linear forwards infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Read also:

Baggage Scan /SVG & JavaScript Animation

SVG Handwriting Animation

SVG Draw on Scroll