I had a question to all the css wizards out there. I came across this CSS animation effect I have not seen before and wondered if anyone knew how it was done? https://www.landr.com/en
Just curious.
Best regards,
Philippe
Use a pseudo element to draw the circle that will radiate out, then use transform: scale() and opacity to cause it to grow and fade out.
using animation
div {
width: 100px;
height: 100px;
cursor: pointer;
position: relative;
}
div::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div:hover::after {
animation: radiate .5s;
}
div, div::after {
background: #09c;
border-radius: 50%;
}
#keyframes radiate {
to {
transform: scale(1.5);
opacity: 0;
}
}
<div></div>
Or using transition
div {
width: 100px;
height: 100px;
cursor: pointer;
position: relative;
}
div::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
div:hover::after {
transform: scale(1.5);
opacity: 0;
transition: transform .5s, opacity .5s;
}
div, div::after {
background: #09c;
border-radius: 50%;
}
<div></div>
Related
Good day to all
Is there a way to not play animation after page load? Without JS and CSS transition.
Searched here and couldn't find an answer.
I sketched a small example where you can clearly see this problem. See code below.
.tooltip {
position: absolute;
animation: fadeOut forwards alternate .8s;
background-color: #f00;
color: #fff;
padding: 20px;
}
button:hover .tooltip {
animation: fadeIn forwards alternate .8s;
}
#keyframes fadeIn {
0% {
display: none;
opacity: 0;
top: 100px;
left: 100px;
}
1% {
display: block;
opacity: 0;
top: 100px;
left: 100px;
}
100% {
display: block;
opacity: 1;
top: 0px;
left: 0px;
}
}
#keyframes fadeOut {
0% {
display: block;
opacity: 1;
top: 0px;
left: 0px;
}
99% {
display: block;
opacity: 0;
top: 100px;
left: 100px;
}
100% {
display: none;
opacity: 0;
top: 100px;
left: 100px;
}
}
<button>
<span>text</span>
<span class="tooltip">press my</span>
</button>
Thanks in advance.
So I got my right sidebar animating nicely coming in, but how would I animate out as of right now it just closing without any animation?
.calendarQuickpanelContainer {
animation: animateopen 0.6s;
bottom: 0;
display: none;
position: fixed;
top: 0;
right: 0;
width: 462px;
z-index: 100;
}
.calendarQuickpanel {
display: block;
}
#keyframes animateopen {
0% {
right: -462px;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
Thanks
Animation is not very good, better use transition here. You have better control because you can use a class to toggle states.
function toggleFunction() {
var element = document.getElementById("sidebar");
element.classList.toggle("active");
}
#sidebar {
background: lightblue;
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
transform: translateX(-260px);
opacity: 0;
transition: transform 1s, opacity 1s;
}
#sidebar.active {
transform: translateX(0px);
opacity: 1;
}
button {
float: right;
margin: 32px;
}
<div id="sidebar">
</div>
<button onclick="toggleFunction()">toggle sidebar</button>
The pattern has two anchors, one of them rotates and becomes blurred when the sibling has :before underlining animation. Can you please suggest what is a possible solution for the current issue?
.sibling {
position: relative;
margin: 30px;
}
.sibling:hover:before {
visibility: hidden;
transform: scaleX(0);
}
.sibling:before {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background-color: #000;
visibility: visible;
transform: scaleX(1);
transition: all 0.4s ease-in-out;
}
.rotated {
transform: rotate(-90deg);
margin: 30px;
position: absolute;
}
<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>
Add translate3d(0,0,0) and -webkit-font-smoothing: antialiased; to your rotated text. This should work.
.sibling {
position: relative;
margin: 30px;
}
.sibling:hover:before {
visibility: hidden;
transform: scaleX(0);
}
.sibling:before {
content: "";
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
left: 0;
background-color: #000;
visibility: visible;
transform: scaleX(1);
transition: all 0.4s ease-in-out;
}
.rotated {
transform: rotate(-90deg) translate3d(0,0,0);
margin: 30px;
position: absolute;
-webkit-font-smoothing: antialiased;
}
<a class='sibling'>Sibling</a>
<a class='rotated'>Rotated</a>
I want to do this: -webkit-transform: translateX(300px) but from the right instead of having the origin on left.
I tried -webkit-transform-origin: 100% 100% and even top right and it didn't affect it.
Is there a way to do it?
By the power of CSS:
body {
padding: 0;
margin: 0;
}
#page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
z-index:2;
right:0;
}
#left_drawer {
background-color: #222222;
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#toggle {
width: 50px;
height: 50px;
background-color: red;
float: right;
}
.open_drawer {
-webkit-animation: open_drawer 300ms ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform: translateX(0);
}
#-webkit-keyframes open_drawer {
to {
-webkit-transform: translateX(-300px);
}
}
This will make it slide in from the right. Fiddle.
Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size?
#nav {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
-webkit-transition: all 0.5s ease-out;
}
.moveto {
top: 0px;
right: 0px;
}
and then I use jQuery's .addClass
You can animate the position (top, bottom, left, right) and then subtract the element's width or height through a CSS transformation.
Consider:
$('.animate').on('click', function(){
$(this).toggleClass("move");
})
.animate {
height: 100px;
width: 100px;
background-color: #c00;
transition: all 1s ease;
position: absolute;
cursor: pointer;
font: 13px/100px sans-serif;
color: white;
text-align: center;
}
/* ↓ just to position things */
.animate.left { left: 0; top: 50%; margin-top: -100px;}
.animate.right { right: 0; top: 50%; }
.animate.top { top: 0; left: 50%; }
.animate.bottom { bottom: 0; left: 50%; margin-left: -100px;}
.animate.left.move {
left: 100%;
transform: translate(-100%, 0);
}
.animate.right.move {
right: 100%;
transform: translate(100%, 0);
}
.animate.top.move {
top: 100%;
transform: translate(0, -100%);
}
.animate.bottom.move {
bottom: 100%;
transform: translate(0, 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to animate
<div class="animate left">left</div>
<div class="animate top">top</div>
<div class="animate bottom">bottom</div>
<div class="animate right">right</div>
And then animate depending on the position...
For elements with dynamic width it's possible to use transform: translateX(-100%); to counter the horizontal percentage value. This leads to two possible solutions:
1. Option: moving the element in the entire viewport:
Transition from:
transform: translateX(0);
to
transform: translateX(calc(100vw - 100%));
#viewportPendulum {
position: fixed;
left: 0;
top: 0;
animation: 2s ease-in-out infinite alternate swingViewport;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingViewport {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw - 100%));
}
}
<div id="viewportPendulum">Viewport</div>
2. Option: moving the element in the parent container:
Transition from:
transform: translateX(0);
left: 0;
to
left: 100%;
transform: translateX(-100%);
#parentPendulum {
position: relative;
display: inline-block;
animation: 2s ease-in-out infinite alternate swingParent;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
#keyframes swingParent {
from {
transform: translateX(0);
left: 0;
}
to {
left: 100%;
transform: translateX(-100%);
}
}
.wrapper {
padding: 2rem 0;
margin: 2rem 15%;
background: #eee;
}
<div class="wrapper">
<div id="parentPendulum">Parent</div>
</div>
Demo on Codepen
Note: This approach can easily be extended to work for vertical positioning. Visit example here.
This worked for me on Chromium. The % for translate is in reference to the size of the bounding box of the element it is applied to so it perfectly gets the element to the lower right edge while not having to switch which property is used to specify it's location.
topleft {
top: 0%;
left: 0%;
}
bottomright {
top: 100%;
left: 100%;
-webkit-transform: translate(-100%,-100%);
}
In more modern browsers (including IE 10+) you can now use calc():
.moveto {
top: 0px;
left: calc(100% - 50px);
}