Some card animation

Developer
Andreas Neeven
Size
2,518 Kb
Views
24,288
  1. Some card animation Previews
  2. Some card animation HTML Codes
  3. Some card animation CSS Codes
  4. Some card animation JS Codes

How do I make an some card animation?

I don't know. Was fun though.. What is a some card animation? How do you make a some card animation? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.

Some card animation Previews
IQ Test

Some card animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Some card animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="item">
</div>
<span>Well, I don't know. Clicking it might work.</span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Some card animation - Script Codes CSS Codes

body { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; width: 100%; height: 100%; background-color: #333; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.item { width: 100px; height: 100px; background-color: #3498db; border-radius: 50%; border-bottom-right-radius: 0; cursor: pointer; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.active { -webkit-transform: rotate(360deg); transform: rotate(360deg); border-bottom-right-radius: 50%; -webkit-transition: border-radius 1s ease-in, -webkit-transform 1s; transition: border-radius 1s ease-in, -webkit-transform 1s; transition: transform 1s, border-radius 1s ease-in; transition: transform 1s, border-radius 1s ease-in, -webkit-transform 1s;
}
.open { width: 250px; height: 350px; border-radius: 0; -webkit-transition: border-radius 0.5s, width 0.1s, height 0.5s ease-in, -webkit-transform 0.5s; transition: border-radius 0.5s, width 0.1s, height 0.5s ease-in, -webkit-transform 0.5s; transition: transform 0.5s, border-radius 0.5s, width 0.1s, height 0.5s ease-in; transition: transform 0.5s, border-radius 0.5s, width 0.1s, height 0.5s ease-in, -webkit-transform 0.5s;
}
span { width: 100%; position: fixed; text-align: left; top: 50px; left: 50px; font-size: 20px; color: white;
}

Some card animation - Script Codes JS Codes

var $item = $('.item');
$item.on('click', function() {	$(this).addClass('active');	setTimeout(function(){	$item.addClass('open');	}, 1000);
});
Some card animation - Script Codes
Some card animation - Script Codes
Home Page Home
Developer Andreas Neeven
Username aneeven
Uploaded September 18, 2022
Rating 3
Size 2,518 Kb
Views 24,288
Do you need developer help for Some card animation?

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!

Andreas Neeven (aneeven) Script Codes
Name
SVG Heart Animation
Neon Hexagons SVG Image-Fill
Digital Sucks
Flexbox grow, shrink and basis
Sass loop
Flexbox align
Custom Profile
Spinning Loader
Flexbox Order
Yay for blend-modes
Create amazing blog posts 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!