How to reasonably animate Font Awesome lock icons
You can't animate two different icons to get unlock effect
. But, if not critical, you can create your own svg icon and animate.
const icon = document.getElementById('icon');
icon.addEventListener('click', () => {
icon.classList.toggle('green');
});
const icon2 = document.getElementById('icon2');
icon2.addEventListener('click', () => {
icon2.classList.toggle('green');
})
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: hsl(201, 27%, 10%);
}
body {
height: 100vh;
background: var(--bg);
display: flex;
justify-content: center;
align-items:center;
gap: 1em;
position: relative;
}
#icon,
#icon2 {
width: 52px;
height: auto;
position: relative;
cursor: pointer;
}
#icon rect,
#icon path,
#icon2 path {
transition: all 0.5s ease-in-out;
}
#icon rect {
fill: red;
}
#icon2 path#body {
fill: red;
}
#icon path,
#icon2 path#hook {
stroke: red;
stroke-dasharray: 30;
stroke-dashoffset: 5;
fill: none;
}
#icon.green rect,
#icon2.green path#body {
fill: green;
}
#icon.green path,
#icon2.green path#hook {
stroke: green;
stroke-dasharray: 20;
}
/* keyhole */
#keyhole {
width: 10px;
height: 16px;
border-radius: 25px;
position: absolute;
top: 65%;
left: 50%;
background-color: var(--bg);
transform: translate(-50%, -50%) rotate(0deg);
transition: all 0.5s ease-in-out;
z-index: 1;
}
#icon.green #keyhole {
transform: translate(-50%, -50%) rotate(-180deg);
}
<div id="icon">
<div id="keyhole"></div>
<svg viewBox="0 0 22 25">
<rect x="0.505493" y="10.1519" width="21.3777" height="14.2868" rx="3" />
<path d="M5.73621 10.4592V7.32508C5.73621 4.31064 8.1799 1.86694 11.1943 1.86694V1.86694C14.2088 1.86694 16.6525 4.31064 16.6525 7.32508V10.4592" stroke-width="3.5" />
</svg>
</div>
<div id="icon2">
<svg viewBox="0 0 22 25" xmlns="http://www.w3.org/2000/svg">
<path id="hook" d="M5.73633 10.4592V7.32508C5.73633 4.31064 8.18002 1.86694 11.1944 1.86694C14.2089 1.86694 16.6526 4.31064 16.6526 7.32508V10.4592" stroke-width="3.5"/>
<path id="body" d="M3.50537 10.1519H18.8831C20.5399 10.1519 21.8831 11.4951 21.8831 13.1519V21.4387C21.8831 23.0956 20.5399 24.4387 18.8831 24.4387H3.50537C1.84852 24.4387 0.505371 23.0956 0.505371 21.4387V13.1519C0.505371 11.4951 1.84852 10.1519 3.50537 10.1519ZM11.1945 13.9858C10.0865 13.9858 9.18823 14.884 9.18823 15.9921V18.3328C9.18823 19.4408 10.0865 20.3391 11.1945 20.3391C12.3026 20.3391 13.2008 19.4408 13.2008 18.3328V15.9921C13.2008 14.884 12.3026 13.9858 11.1945 13.9858Z"/>
</svg>
</div>
How to toggle Font Awesome animated icons?
You can't animate two different icons to get a real unlock effect
. But, if not critical, you can create your own svg icon and animate.
unlock effect
$('#icon').click(function() {
$('#icon').toggleClass('green');
});
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: hsl(201, 27%, 10%);
color: white;
display: grid;
place-items: center;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
#icon {
width: 52px; /* adjust icon size */
height: auto;
cursor: pointer;
}
#icon rect,
#icon path {
transition: all 0.5s ease-in-out;
}
#icon rect {
fill: red;
}
#icon path {
stroke: red;
stroke-dasharray: 30;
stroke-dashoffset: 5;
fill: none;
}
#icon.green rect {
fill: green;
}
#icon.green path {
stroke: green;
stroke-dasharray: 20;
}
</style>
<div id="icon" class="fa-5x fa-stack lock">
<svg viewBox="0 0 22 25">
<rect x="0.505493" y="10.1519" width="21.3777" height="14.2868" rx="3"/>
<path d="M5.73621 10.4592V7.32508C5.73621 4.31064 8.1799 1.86694 11.1943 1.86694V1.86694C14.2088 1.86694 16.6525 4.31064 16.6525 7.32508V10.4592"stroke-width="3.5" />
</svg>
</div>
How to start animation at a certain point (75 %)?
You need to override .fa-flip animation:
$('.lock').click(function() {
$('.fa-lock', this).addClass('fa-flip');
$('.fa-unlock', this).addClass('fa-flip');
setTimeout(function() {
$('.fa-lock').css('color', 'rgba(0, 0, 0, 0)');
$('.fa-unlock').css('color', 'green');
}, 600);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet" />
<style>
@keyframes halfflip {
to {
transform: rotateY(360deg);
}
}
.fa-flip {
animation-name: halfflip;
animation-timing-function: ease-in-out;
}
</style>
<div class="fa-5x fa-stack lock">
<i class="fas fa-unlock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: transparent; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
<i class="fas fa-lock fa-stack-1x" style="--fa-animation-duration: 4s; --fa-animation-iteration-count: 1; color: red; animation-fill-mode: forwards; --fa-animation-delay:-2s"></i>
</div>
Related Topics
How to Increment a Number by 1 on Window Scroll
JavaScript Style.Display="None" or Jquery .Hide() Is More Efficient
Making an Element Visible by Hovering Another Element (Without :Hover-Property)
Jquery $('#Div').Show().Delay(5000).Hide(); Doesn't Work
Absolute Positioned Floating Header Jitters in Safari
Jquery .Css() Function Not Returning Expected Values
Bootstrap Switch Checked Event
Jquery Word for Word Fade in Effect
iOS Browser - Iframe Jumps to Top When Changing CSS or Content Using JavaScript
How to Get the Exact Rgba Value Set Through CSS via JavaScript
Adding a Background Video with React
Trigger Same CSS Animation on Every Click
How to Override the Style of the Material-Ui Switch Component When Checked
CSS Overflow Hidden Increases Height of Container
Using Jquery How to Show and Hide Different Div's Onclick Event