SAVE STATE in CSS Animation - no JS

Developer
Elad Shechter
Size
2,334 Kb
Views
62,744
  1. SAVE STATE in CSS Animation - no JS Previews
  2. SAVE STATE in CSS Animation - no JS HTML Codes
  3. SAVE STATE in CSS Animation - no JS CSS Codes
  4. SAVE STATE in CSS Animation - no JS JS Codes

How do I make an save state in css animation - no js?

What is a save state in css animation - no js? How do you make a save state in css animation - no js? This script and codes were developed by Elad Shechter on 13 July 2022, Wednesday.

SAVE STATE in CSS Animation - no JS Previews
IQ Test

SAVE STATE in CSS Animation - no JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SAVE STATE in CSS Animation - no JS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg">
<a class="button right">go right</a>
<a class="button left">go left</a>
<a class="button bottom">go bottom</a>
<a class="button top">go top</a>
<a class="button small">make smaller</a> <a class="button big">make bigger</a> <div class="circle"></div>
</div> <div class="info"> <p class="intruction">* press the button (long) to move</p> <p>This example show how to save state in CSS.</p> <p>Done By Elad Shechter</p>
</div> <script src="js/index.js"></script>
</body>
</html>

SAVE STATE in CSS Animation - no JS - Script Codes CSS Codes

/****LOGIC****/
.right:active ~ .circle{left:85%;transition:2s all linear;}
.left:active ~ .circle{left:30px;transition:2s all linear;}
.bottom:active ~ .circle{top:85%;transition:2s all linear;}
.top:active ~ .circle{top:30px;transition:2s all linear;}
.small:active ~ .circle{-webkit-transform:scale(0.3); transition:5s all;}
.big:active ~ .circle{-webkit-transform:scale(1.7); transition:5s all;}
/**circle**/
.circle{ transition:999999999s all linear; width:100px; height:100px; background-image: linear-gradient(to bottom, #ff9a9a, #ff4040); border:solid 2px #ff4040; border-radius:50%; transition:999999999s all; position:absolute;left:50%; top:50%; -webkit-transform:translateX(-50%) translateY(-50%) scale(1);
}
/**contabier of ball**/
.bg{width:300px; height:300px; position:relative; z-index:10; margin:50px auto; background-image: linear-gradient(to bottom, #f2f9fe, #d6f0fd);
}
/*Buttons*/
.button{ border-radius:5px; padding:10px; border:solid 2px #555; width:70px; text-align:center; cursor:pointer; background-image: linear-gradient(to bottom, #ffd65e, #febf04);
}
.button:hover{background-image: linear-gradient(to top, #ffd65e, #febf04);}
.left{position:absolute; left:-90px; top:45%;}
.right{position:absolute; right:-90px; top:45%;}
.top{position:absolute; left:35%; top:-40px;}
.bottom{position:absolute; left:35%; bottom:-40px;}
.small{position:fixed; left:20px; top:50px;}
.big{position:fixed; left:150px; top:50px;}
/*****INFO TEXT*****/
.info{position:fixed; bottom:20px; left:20px; font-size:20px; font-weight:bold; line-height:16px;}
p{font-size:16px; line-height:20px;}
.intruction{text-transform:uppercase; color:green; font-size:26px;}

SAVE STATE in CSS Animation - no JS - Script Codes JS Codes

/*NO JS
------------------------------
autor: Elad Shechter
http://il.linkedin.com/in/eladshechter/
https://coderwall.com/p/u/elad2412
*/
SAVE STATE in CSS Animation - no JS - Script Codes
SAVE STATE in CSS Animation - no JS - Script Codes
Home Page Home
Developer Elad Shechter
Username elad2412
Uploaded July 13, 2022
Rating 3
Size 2,334 Kb
Views 62,744
Do you need developer help for SAVE STATE in CSS Animation - no JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Elad Shechter (elad2412) Script Codes
Name
Responsive Background Images
Color Like Buttons of Facebook
Image Gallery no JS
Background clip and origin
Pure CSS Image Gallery
Keyboared buttons 3d
Pure CSS Notification Panel
PURE CSS GAME - NO JS
Flipping Card - Stage one
Making seperator - select all elements except from the first one
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!