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.
Related
Please help, when I'm trying to play animation with moving ball in position X and Y at the same time it doesn't work, some strange behaviour. I would like to look like a batted and falling ball
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s, fly-ball-y 2s;
}
#keyframes fly-ball-x {
100% {
transform: translateX(300px);
}
}
#keyframes fly-ball-y {
100% {
transform: translateY(100px);
}
}
<div class="ball"></div>
**The result I'm expecting is like the code below:**
#keyframes fly-ball-x {
100% {
left: 300px;
}
}
#keyframes fly-ball-y {
100% {
bottom: 0;
}
}
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s cubic-bezier(0.17, 0.67, 0.6, 1), fly-
ball-y 2s;
}
<div class="ball"></div>
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball 2s
}
#keyframes fly-ball {
100% {
transform: translateX(300px) translateY(100px);
}
}
<div class="ball"></div>
It is because you weren't running the animations concurrently. Here both translations are just being run at the same time. You just had a bit more than you needed.
EDIT
Check out this blog post. It gives explanations on the kinds of curves it seems you are going for Curved Path Animations In CSS
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>
I am trying to apply a cool "Glitch Effect" I saw in this video here:
However, I cannot seem to get this animation to work. Here is the heading element I am trying to apply the effect to:
<h1 class="header-block-heading-primary">Web Developer</h1>
Here is the SCSS:
.header-block-heading-primary {
// animation: glitch-effect 3s infinite;
position: relative;
&::before,
&::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
&::before {
color: red;
animation: glitch-effect 3s infinite;
}
&::after {
color: blue;
animation: glitch-effect 2s infinite;
}
}
Here is the animation:
#keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
And here is the outputted CSS:
.header-block-heading-primary {
position: relative;
}
.header-block-heading-primary::before,
.header-block-heading-primary::after {
position: absolute;
left: 0;
top: 0;
content: "";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
.header-block-heading-primary::before {
color: red;
-webkit-animation: glitch-effect 3s infinite;
animation: glitch-effect 3s infinite;
}
.header-block-heading-primary::after {
color: blue;
-webkit-animation: glitch-effect 2s infinite;
animation: glitch-effect 2s infinite;
}
I have followed the same setup as the tutorial, and even referenced some old projects of mine looking at the use of ::before and ::after and they work just fine with the practically the same code (for the pseudo elements).
I have tried just single semi-colon, so :before & :after, and that did not work. I added the animation directly to the element itself (as seen by the commented out // animation: glitch-effect 3s infinite; underneath the .header-block-heading-primary selector), and it works fine so I'm being led to believe the ::before and ::after elements are not working. Also manually adding -webkit- in the nested SCSS did not work either.
I have looked at multiple other posts here on the site and could not find a answer that helped me solve this problem. So any help with this would be greatly appreciated!
your animations is working but you need to set ::after and ::before content:"Web Developer". you can show the effect in snippet.
.header-block-heading-primary {
position: relative;
}
.header-block-heading-primary::before,
.header-block-heading-primary::after {
position: absolute;
left: 0;
top: 0;
content: "Web Developer";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
.header-block-heading-primary::before {
color: red;
animation: glitch-effect 3s infinite;
}
.header-block-heading-primary::after {
color: blue;
animation: glitch-effect 2s infinite;
}
#keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
<h1 class="header-block-heading-primary">Web Developer</h1>
this is the sass code this is working in my page please try this code.
.header-block-heading-primary {
position: relative;
&::before,
&::after {
position: absolute;
left: 0;
top: 0;
content: "Web Developer";
display: block;
height: 100%;
width: 100%;
z-index: -1;
}
&::before {
color: red;
animation: glitch-effect 3s infinite;
}
&::after {
color: blue;
animation: glitch-effect 2s infinite;
}
}
#keyframes glitch-effect {
0% {
left: -3px;
top: -3px;
}
25% {
left: 3px;
top: 0px;
}
50% {
left: -2px;
top: 3px;
}
75% {
left: 2px;
top: -2px;
}
100% {
left: 0px;
top: -3px;
}
}
Thank you.
I got it! The background image for the header section was conflicting with the ::before and ::after, so I just need to add a higher z-index to the heading and it works!
.header-block-heading-primary {
position: relative;
z-index: 20;
&::before {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
content: "Web Developer";
z-index: -1;
}
&::after {
content: "Web Developer";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
&::before {
color: #ff00c1;
animation: glitch-effect 3s infinite;
}
&::after {
color: #3498db;
animation: glitch-effect 2s infinite;
}
&:hover::before {
animation: glitch-effect 1s infinite;
}
&:hover::after {
animation: glitch-effect 2s infinite;
}
}
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>
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.