Material Design Card Animation

Developer
Trevor L.J.M. McIntire
Size
3,146 Kb
Views
6,072
  1. Material Design Card Animation Previews
  2. Material Design Card Animation HTML Codes
  3. Material Design Card Animation CSS Codes
  4. Material Design Card Animation JS Codes

How do I make an material design card animation?

A quick little animation with a material-design card.. What is a material design card animation? How do you make a material design card animation? This script and codes were developed by Trevor L.J.M. McIntire on 15 January 2023, Sunday.

Material Design Card Animation Previews
IQ Test

Material Design Card Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Design Card Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card"> <div class="card-image"> <h1>Get Lost In the Woods</h1> </div> <div class="card-body"> <div class="controls"> <a data-action="drawer" href="#"> <i class="ion-android-arrow-up up"></i> <i class="ion-android-arrow-down down"></i> </a> <a data-action="share" href="#"> <i class="ion-android-share-alt"></i> </a> <a data-action="bookmark" href="#"> <i class="ion-android-bookmark"></i> </a> <a data-action="favorite" href="#"> <i class="ion-android-favorite"></i> </a> </div> <h1>Get Lost In the Woods</h1> <p> Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. </p> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Material Design Card Animation - Script Codes CSS Codes

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500');
body { font-family: 'Roboto', sans-serif; font-weight: 300; background: #ff2a68; background: -moz-linear-gradient(30deg, #ff2a68 0%, #5ac8fb 100%); background: -webkit-linear-gradient(30deg, #ff2a68 0%,#5ac8fb 100%); background: linear-gradient(30deg, #ff2a68 0%,#5ac8fb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2a68', endColorstr='#5ac8fb',GradientType=1 );
}
.card { /* Remove this for use */ position: absolute !important; top: 50% !important; left: 50% !important; transform: translateX(-50%) translateY(-50%) !important;
}
.card { display: block; position: relative; width: 500px; height: 260px; border-radius: 2px; background: #FAFAFA; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.card .card-image { display: block; position: relative; width: 500px; height: 210px; background-image: url('https://4.bp.blogspot.com/-T_k03UFtS8k/U96RDVp8ebI/AAAAAAABF5E/4107zIbo29U/s0/Google+IO+Landscape_HD.jpg'); background-size: cover; background-position: 50% 20%; transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card.active .card-image { background-position: 50% 50%;
}
.card .card-image h1 { position: absolute; bottom: 5px; left: 10px; margin: 0; padding: 0; color: #FAFAFA; font-weight: 300; transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}
.card.active .card-image h1 { bottom: 100px;
}
.card .card-body { position: absolute; display: block; bottom: -210px; left: 0; width: 500px; height: 260px; background: #FAFAFA; padding: 0 15px; box-sizing: border-box; transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card.active .card-body { bottom: 0;
}
.card .card-body .controls { display: block; width: 100%; height: 50px; margin-bottom: 20px;
}
.card .card-body .controls a { position: relative; display: block; float: right; height: 50px; width: 50px; color: #737373; line-height: 50px; text-align: center; font-size: 20px; transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card .card-body .controls a[data-action="drawer"] { float: left;
}
.card .card-body .controls a[data-action="drawer"] i { position: absolute; left: 50%; transform: translateX(-50%); transition: opacity 0.32s ease, transform 0.32s ease, color 0.22s ease;
}
.card .card-body .controls a[data-action="drawer"] i.down { opacity: 0; transform: translateX(-50%) rotate(180deg);
}
.card.active .card-body .controls a[data-action="drawer"] i.down { opacity: 1; transform: translateX(-50%) rotate(0deg);
}
.card .card-body .controls a[data-action="drawer"] i.up { opacity: 1; transform: translateX(-50%) rotate(0deg);
}
.card.active .card-body .controls a[data-action="drawer"] i.up { opacity: 0; transform: translateX(-50%) rotate(180deg);
}
.card .card-body .controls a:hover { color: #4183D7;
}
.card .card-body .controls a[data-action="share"]:hover { color: #4183D7;
}
.card .card-body .controls a[data-action="bookmark"]:hover { color: #F9BF3B;
}
.card .card-body .controls a[data-action="favorite"]:hover { color: #D24D57;
}
.card .card-body h1 { display: block; padding: 0; margin: 0 0 20px 0; color: #323232; font-size: 20px;
}
.card .card-body p { display: block; overflow: hidden; margin: 0; color: #737373; font-size: 16px; text-align: left; opacity: 0; padding: 40px 0 0 0; font-weight: 400; transition: padding 0.4s cubic-bezier(.25,.8,.25,1), opacity 0.5s cubic-bezier(.25,.8,.25,1); transition-delay: 0.1s;
}
.card.active .card-body p { opacity: 1; padding: 0;
}

Material Design Card Animation - Script Codes JS Codes

$('body').on('click', '[data-action="drawer"]', function() { $(this).closest('.card').toggleClass("active");
});
Material Design Card Animation - Script Codes
Material Design Card Animation - Script Codes
Home Page Home
Developer Trevor L.J.M. McIntire
Username uplusion23
Uploaded January 15, 2023
Rating 3
Size 3,146 Kb
Views 6,072
Do you need developer help for Material Design 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!

Trevor L.J.M. McIntire (uplusion23) Script Codes
Name
Sliding CSS3 Button
Audio Player Dark Theme
Download Page
A Pen by Trevor L.J.M. McIntire
A thing.
IOS8 Text Design
Material Design Elements
DOOM Page
Gamepad Detection in HTML5 API
Admin Panel
Create amazing Facebook ads 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!