here is my code...
.poop::before {
content: '';
position: absolute;
border-radius: 50%;
width: 50%;
height: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index:-1;
border:1px
}
.poop {
margin-top: 60px;
text-align: center;
font-family: Bungee Spice;
animation: poop 5s linear forwards;
animation-play-state: paused;
}
.poop:hover{
animation-play-state: running;
}
#keyframes poop {
from {opacity: 1}
to {opacity: 0}
}
can i add another #keyframes? everything ive tried when I add an different #keyframe and then just add a comma inbetween animations doesnt work...
All im trying to do is get it to scroll down the page while it fades out.
edit: sorry yes i named the class poop im not trolling i was just too lazy to change it
do like this - combination of more than one props
#keyframes poop {
from {
transform: translateY(0px);
opacity: 1
}
to {
transform: translateY(60px);
opacity: 0
}
}
A note: with the new translate function, you can replace this
transform: translateY(60px);
to this
translate: 0 60px;
Related
I am trying to animate a line that expands both ways from the centre using transform:scale but for some reason the line kind of "rewinds" slightly when it reaches the end, but only on the right side of the line. This only seems to happen on firefox, (both on mobile and desktop) but seems fine on chrome.
<div class="line"></div>
<style>
.line {
height: 4px;
width: 5px;
background-color: #5d496a;
margin: 0 50%;
animation: line_animation 1s forwards ;
}
#keyframes line_animation {
0% {
transform: scale(1,1);
}
100%{
transform: scale(22,1);
}
}
</style>
I am still learning animations so I am not sure what I am doing wrong. Any help would be very appreciated.
https://www.w3schools.com/code/tryit.asp?filename=GRA6EYT2GLSX
Looks like it was an issue with scale being greater than 1.
Fixed by changing width: 5px; to width: 15%; and changed
#keyframes line_animation {
0% {
transform: scale(1,1);
}
100%{
transform: scale(22,1);
}
}
to
#keyframes line_animation {
from {
transform: scale(0.01,1);
}
to{
transform: scale(1,1);
}
}
I wanna make a drop animation when the page loads similar to a working example I've seen at someone else but mine doesn't. The image doesn't drop at all, does not transition from 0 opacity to 1 opacity. It just suddenly appears after the given duration. Help me, please.
.cover img{
height: 60vh;
filter: drop-shadow(1px 5px 3px black);
position: relative;
left: 60px;
animation: drop 1.5s ease;
}
#keyframes drop{
0% {
opacity: 0%;
transform: translateY(-80px);
}
100% {
opacity: 1%;
transform: translateY(0px);
}
}
What I think you've done wrong is used a percentage in the opacity. You just need the number.
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
Does this help?
I tested with the following answers:
Pure CSS rotate animation broken while in infinite loop
Stop infinite CSS3 animation and smoothly revert to initial state
CSS Image Fade Animation Only Runs First Time,
but the animation duration and timeline (for example, from step by step, from start to end) did not work. The three images need to be in the same place at once.
I wanted to use https://codepen.io/jay-bee-why/pen/Htejl, but unfortunately I do not want to use jQuery. I am CSS and JavaScript purist.
An image is worth a thousand words. You will understand easily the image. I also provide very small snippet code box.
.flipping-images
{
align-items: center;
display: flex;
flex-flow: row nowrap;
height: 80%;
justify-content: center;
/* opacity: 0; */
position: relative;
transform: translateX(100%);
width: 22%;
}
.show-l
{
animation: show-image 5s ease-in-out 300ms infinite;
left: 0;
position: absolute;
transform-origin: left;
}
.hide-l
{
animation: hide-image 5s ease-in-out 800ms infinite;
position: absolute;
transform-origin: left;
}
.hide-l2
{
animation: hide-image 5s ease-in-out 600ms infinite;
position: absolute;
transform-origin: right;
}
#keyframes hide-image
{
0%
{
left: 0;
transform: rotateY(0deg);
}
30%
{
left: 10%;
transform: rotateY(0deg);
}
50%
{
opacity: 1;
}
100%
{
left: -100%;
opacity: 0;
transform: rotateY(90deg);
}
}
#keyframes show-image
{
0%
{
left: 100%;
transform: rotateY(90deg);
}
30%
{
left: 110%;
transform: rotateY(90deg);
}
100%
{
left: 0%;
transform: rotateY(0deg);
}
}
<div class="flipping-images">
<img class="show-l" src="https://via.placeholder.com/432x864/fdc34f/FEFEFE?text=1">
<img class="hide-l2" src="https://via.placeholder.com/432x864/3e72ff/FEFEFE?text=2">
<img class="hide-l" src="https://via.placeholder.com/432x864/222222/FEFEFE?text=3">
</div>
I'm not sure I understand your image since it says the second image should disappear but it also says the animation is infinite. I hope it's working as you intended, if not just leave a comment on what needs to be fixed.
I'm using the animationend event to control the animations.
var counter = 1;
var div = document.querySelector('.flipping-images');
var images = document.querySelectorAll('.flipping-images img');
var showNext = function () {
counter++;
if (counter > 3) counter = 1;
div.classList.remove('image1', 'image2', 'image3')
div.classList.add('image'+counter);
};
for (var img of images) {
img.addEventListener('animationend', showNext);
img.addEventListener('click', showNext);
}
document.querySelector('#next').addEventListener('click', showNext);
.flipping-images {
perspective: 300px;
}
.flipping-images img {
display: none;
animation: rotate 5s linear 1;
}
.flipping-images.image1 img:nth-child(1),
.flipping-images.image2 img:nth-child(2),
.flipping-images.image3 img:nth-child(3) {
display: block;
}
.flipping-images.image2 img:nth-child(2) {
animation: rotate 5s linear infinite;
}
#keyframes rotate {
0% { transform: rotateY(-45deg); }
100% { transform: rotateY(45deg); }
}
button {
margin: 1em;
}
<div class="flipping-images image1">
<img src="https://via.placeholder.com/100x100/fdc34f/FEFEFE?text=1">
<img src="https://via.placeholder.com/100x100/3e72ff/FEFEFE?text=2">
<img src="https://via.placeholder.com/100x100/222222/FEFEFE?text=3">
</div>
<button id="next">Next</button>
I currently have the following code in my angular app (2+):
.header {
background: rgba(white, 0);
&.fixed-top {
background: rgba(white, 1);
border-bottom: solid whitesmoke 1px;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
}
<nav class="navbar navbar-toggleable-sm header" [class.fixed-top]="stickyHeader" (scroll)="scrollHandler()">...</nav>
The handleScroll() function simply sets stickyHeader to true after the user scrolls down "enough" pixels, and so the header menu becomes sticky. Here it is:
stickyHeader = false;
#HostListener('window:scroll', [])
scrollHandler() {
this.stickyHeader = window.scrollY > 90;
}
My question is: how can I make that menu appear to slide (animated) from top, as if it descended from above the browser?!
I am able to get the desired result by animating transform: translate using CSS animations
I have set animation-iteration-count to infinite for demo purposes. In your case it would be 1
To control the speed use animation-duration
I also use animation-fill-mode and set it to forwards to stop the animation at the end and not have it revert to the original state.
I added transform: translate(0, -20px) to .fixed-top to move it out of the display area until the animation starts.
Finally, I added animation-timing-function: ease; to control how the animation plays.
body {
margin: 0 auto;
padding: 0;
}
.fixed-top {
background: red;
z-index: 1030;
width: 100%;
height: 50%;
animation-name: slide;
animation-duration: 2s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
transform: translate(0, -20px)
}
#keyframes slide {
0% {
transform: translate(0, -20px);
opacity:.1
}
100% {
transform: translate(0, 0);
opacity:1
}
}
<div class="fixed-top">test</div>
I have to elements and I want to animate them seperatly. Element one should play animation one and element two should play animation two.
But when I test it element one plays both animations and element two none.
This is not happening if I start the animation of element two with a delay, but this is no solution...
Here's element one:
#wrapper_splashscreen #logo {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
-webkit-animation: logoIntro 0.5s 1; }
#-webkit-keyframes logoIntro
{
0% {
-webkit-transform: scale(0, 0);
opacity: 0;
}
80% {
-webkit-transform: scale(1.4, 1.4);
}
90% {
-webkit-transform: scale(1.1, 1.1);
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
and here's element two:
#wrapper_splashscreen #menu {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
background: #151515;
-webkit-animation-name: menuIntro 1s 1; }
#-webkit-keyframes menuIntro
{
0%, 30% {
bottom: -40px;
}
100% {
bottom: 0px;
}
}
The logo (element one) is fadeing in and moving down and the menu (element two) is doing nothing.
In the second element you've an error:
-webkit-animation-name: menuIntro 1s 1;
It should be -webkit-animation.
I'm not sure what's the problem with the first element (please add a fiddle/demo), buy maybe setting a transform-origin will help
It seems like the animation becomes buggy when you navigate to the animated element with an anchor. The browser navigates to the element while its moving and the animation gets broken.