.anim-cat-2 img {
animation: animcats 10s infinite;
}
#keyframes animcats {
0% {
transform: translate(100px, 100px)rotate(-15deg);
}
10% {
transform: translate(150px, -100px) rotate(15deg);
}
20% {
transform: rotate(-15deg) translate(200px, 100px);
}
30% {
transform: rotate(15deg)translate(250px, -100px);
}
40% {
transform: rotate(-15deg)translate(300px, 100px);
}
50% {
transform: rotate(15deg)translate(350px, -100px);
}
60% {
transform: rotate(-15deg)translate(400px, 100px);
}
70% {
transform: rotate(15deg)translate(450px, -100px);
}
80% {
transform: rotate(-15deg)translate(500px, 100px);
}
90% {
transform: rotate(15deg)translate(550px, -100px);
}
100% {
transform: rotate(-15deg)translate(600 px, 100px);
}
}
<div class="anim-cat-2">
<img src="https://66.media.tumblr.com/95927edf9e85ece73dac69ade623432c/tumblr_otrmgaTiin1vxe4v6o1_400.png" style="height: 130px;width: 180px;margin-top: 20px;">
</div>
i cant make it go smoothly forward in right tilt, its suppossed to make the right angle and move up and down moving forward. i already tried to change the degree, x n y axis but it still didnt work,please help me
Run code snippet.
Although it makes the right angle, move up and down, it did'nt meets the expectation at the end of the animation.
.anim-cat-2 img {
animation: animcats 8s infinite;
}
#keyframes animcats {
0% {
transform: rotate(0deg) translate(0px,0px);
}
8% {
transform: rotate(9deg);
}
10% {
transform: translate(100px,150px);
}
20% {
transform:rotate(-9deg) translate(100px,150px);
}
30% {
transform: translate(200px,0px);
}
40% {
transform: rotate(9deg) translate(200px,0px);
}
50% {
transform: translate(300px,150px);
}
60% {
transform: rotate(-9deg) translate(300px,150px);
}
70% {
transform: translate(400px,0px);
}
80% {
transform: rotate(9deg) translate(400px,0px);
}
90% {
transform: translate(500px,150px);
}
100% {
transform: rotate(-9deg) translate(500px,150px);
}
}
<div class="anim-cat-2">
<img src="https://66.media.tumblr.com/95927edf9e85ece73dac69ade623432c/tumblr_otrmgaTiin1vxe4v6o1_400.png" style="height: 130px;width: 180px;margin-top: 20px;">
</div>
Related
I'm build a portfolio page with cargo site. I'm not an developer and I don't have really a good Idea about HTML & CSS. I have tried some research on the Web for this but found nothing that would help me. Maybe some of you could help me.
I just wanted to build an Easter egg on my site, it should work like this: on a icon click it should trigger this css animation. The code for this animation is directly from cargo but it works only as an animation right away when you enter the page. How can I hide it behind a Icon trigger.
https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen
<div class="flier">{image 1}</div>
.flier {
pointer-events: none;
}
.flier {
animation: fly 50s linear infinite;
pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 1s;
z-index: 999999;
}
/* Keyframe values control where the element will begin
and end its trajectory across the screen. Each rule
represents a path the element follows across the screen. */
#keyframes fly {
98.001%, 0% {
display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}
15% {
transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}
15.001%, 18% {
transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}
40% {
transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}
40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}
65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}
65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}
95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}
}
Step1: Add the button in HTML
<button onClick="animEgg()">
<i class="fas fa-egg"></i> <span id='toggleText'>Start</span>
</button>
Step2: Your code which has an image to be animated
<div class="flier">
<img src="https://picsum.photos/200/300" />
</div>
Step3: Add css
.flier > * {
/* Adjust animation duration to change the element’s speed */
pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 1s;
z-index: 999999;
}
.flier img.anim{
animation: fly 50s linear infinite;
}
/* Keyframe values control where the element will begin
and end its trajectory across the screen. Each rule
represents a path the element follows across the screen. */
#keyframes fly {
98.001%, 0% {
display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}
15% {
transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}
15.001%, 18% {
transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}
40% {
transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}
40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}
65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}
65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}
95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}
}
Step4: Add JS (Hopefully jQuery library is linked)
function animEgg(){
$(".flier img").toggleClass('anim');
if($("#toggleText").text() == 'Start')
$("#toggleText").text('Stop');
else
$("#toggleText").text('Start');
}
All the constituent parts are there apart from triggering it.
Just need to trigger the animation by maybe adding a class specifically for the animation property... something like this?
https://codepen.io/badgerswork/pen/wvzvWdW
let elem = document.querySelector('.flier')
let trigger = document.querySelector('.activate')
trigger.addEventListener('click', function() {
elem.classList.toggle('active');
trigger.classList.toggle('active');
})
.flier {
pointer-events: none;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
z-index: 999999;
}
.flier.active {
animation: fly 50s linear infinite;
animation-delay: 1s;
}
.activate {
display: inline-block;
padding: 2em;
background: red;
color: white;
}
.activate.active {
display: inline-block;
padding: 2em;
background: green;
color: white;
}
#keyframes fly {
98.001%, 0% {
display: block;
transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}
15% {
transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}
15.001%, 18% {
transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}
40% {
transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}
40.001%, 43% {
transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}
65% {
transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}
65.001%, 68% {
transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}
95% {
transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}
}
<div class="flier">
<img src="https://via.placeholder.com/150" />
</div>
Go
I want to have my font awesome icon "ring" each 1 seconds, by ring I mean having a css animation which makes the phone look like if it where ringing (maybe a brief rotation with transform origin center?), I'm a noob with css animations:
<div style="width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; background-color:white;"><i class="LAYOUTnav7_links_button_icon fa fa-phone fs_bigger main"></i></div>
Any help?
You can use animation and keyframes to do this, here is an example:
.phone {
display:block;
width: 60px;
height: 60px;
font-size: 40px;
margin:50px auto 0;
color: #9e9e9e;
animation: ring 4s .7s ease-in-out infinite;
transform-origin: 50% 4px;
}
#keyframes ring {
0% { transform: rotate(0); }
5% { transform: rotate(30deg); }
10% { transform: rotate(-28deg); }
15% { transform: rotate(34deg); }
20% { transform: rotate(-32deg); }
25% { transform: rotate(30deg); }
30% { transform: rotate(-28deg); }
35% { transform: rotate(26deg); }
40% { transform: rotate(-24deg); }
45% { transform: rotate(22deg); }
50% { transform: rotate(-20deg); }
55% { transform: rotate(18deg); }
60% { transform: rotate(-16deg); }
65% { transform: rotate(14deg); }
70% { transform: rotate(-12deg); }
75% { transform: rotate(10deg); }
80% { transform: rotate(-8deg); }
85% { transform: rotate(6deg); }
90% { transform: rotate(-4deg); }
95% { transform: rotate(2deg); }
100% { transform: rotate(-1deg); }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div>
<span class="phone fa fa-phone"></span>
</div>
I have two images moving around a DOM element. But their rotation is wrong and the movement is not smooth.
My fiddle
#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}
#mainPage>p {
text-align: center;
}
.bicycle {
width: 48px;
height: 30px;
background: red;
}
#bicycleOriginal {
animation: moveBicycleOriginal 20s infinite;
}
#bicycleFlipped {
animation: moveBicycleFlipped 20s infinite;
}
#mainTxt {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}
#keyframes moveBicycleOriginal {
from {
transform: translate(0, 0);
}
1% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(350px, 0);
}
26% {
transform: translate(350px, 0) rotate(90deg);
}
50% {
transform: translate(350px, 150px);
}
51% {
transform: translate(350px, 150px) rotate(180deg);
}
75% {
transform: translate(0, 150px);
}
76% {
transform: translate(0, 150px) rotate(270deg);
}
to {
transform: translate(0, 0);
}
}
#keyframes moveBicycleFlipped {
from {
transform: translate(350px, 0);
}
1% {
transform: translate(350px, 0) rotate(0deg);
}
25% {
transform: translate(0, 0);
}
26% {
transform: translate(0, 0) rotate(90deg);
}
50% {
transform: translate(0, -150px);
}
51% {
transform: translate(0, -150px) rotate(180deg);
}
75% {
transform: translate(350px, -150px);
}
76% {
transform: translate(350px, -150px) rotate(270deg);
}
to {
transform: translate(350px, 0);
}
}
<div id="mainPage">
<div class="bicycle" id="bicycleOriginal"></div>
<p class="txt" id="mainTxt">DRAHTESEL</p>
<div class="bicycle" id="bicycleFlipped"></div>
</div>
So what I want is something like this
After passing the first keyframe the boxes get into a wrong rotation. Also they don't move smoothly, the get faster in the middle and slower when reaching the end.
Could someone help me with the keyframes?
You need to always keep the rotate defined within the transform because each transform will override the previous one and removing the rotation means rotate(0).
And to make the animation more accurate, the last state should be similar to the first state to avoid the jump when restarting the animation. So you should go to 360deg of rotation which is equivalent to 0deg. (like you did with the translation where you come back to the initial value).
Then you may adjust the animation-timing-function to control the animation progress if needed.
#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}
#mainPage>p {
text-align: center;
}
.bicycle {
width: 48px;
height: 30px;
background: red;
}
#bicycleOriginal {
animation: moveBicycleOriginal 20s infinite;
}
#bicycleFlipped {
animation: moveBicycleFlipped 20s infinite;
}
#mainTxt {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}
#keyframes moveBicycleOriginal {
from {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(350px, 0) rotate(0deg);
}
26% {
transform: translate(350px, 0) rotate(90deg);
}
50% {
transform: translate(350px, 150px) rotate(90deg);
}
51% {
transform: translate(350px, 150px) rotate(180deg);
}
75% {
transform: translate(0, 150px) rotate(180deg);
}
76% {
transform: translate(0, 150px) rotate(270deg);
}
98% {
transform: translate(0, 0) rotate(270deg);
}
to {
transform: translate(0, 0) rotate(360deg);
}
}
#keyframes moveBicycleFlipped {
from {
transform: translate(350px, 0) rotate(0deg);
}
25% {
transform: translate(0, 0) rotate(0deg);
}
26% {
transform: translate(0, 0) rotate(90deg);
}
50% {
transform: translate(0, -150px) rotate(90deg);
}
51% {
transform: translate(0, -150px) rotate(180deg);
}
75% {
transform: translate(350px, -150px) rotate(180deg);
}
76% {
transform: translate(350px, -150px) rotate(270deg);
}
97% {
transform: translate(350px, 0) rotate(270deg);
}
to {
transform: translate(350px, 0) rotate(360deg);
}
}
<div id="mainPage">
<div class="bicycle" id="bicycleOriginal"></div>
<p class="txt" id="mainTxt">DRAHTESEL</p>
<div class="bicycle" id="bicycleFlipped"></div>
</div>
The speed slowing/speeding is because of the animationTiming (default ease), that should be 'linear'.
The reason the animation is incorrect, it because you unset the rotation. This might come unexpected, you control transformation with css transform. You also control rotation with transform.
#example{
transform: rotate(10deg)
}
#example.changed{
transform: translateX(100px);
}
In this snippet, when you add the class changed you redefine transform, telling it to forget rotate and set translateX. In this example, to keep them both:
#example.changed{
transform: rotate(10deg) translateX(100px);
}
I have taken the answer from Temani Afif, and changed it a little bit.
I set an aditional transform, applied after the rotation. This makes the turn be smooth in the sense that the object rotates following a path and not in the same place
I have set the timing to linear, as suggested by Martijn
I have simplified it to use a single keyframes rule, setting a delay on the flipped div.
And made longer the time slice for the long sides and shoprter the other, so that the perceived speed is more constant
The result:
#mainPage {
width: 400px;
height: 165px;
margin: 10% auto;
}
#mainPage>p {
text-align: center;
}
.bicycle {
width: 48px;
height: 30px;
background: red;
}
#bicycleOriginal {
animation: moveBicycleOriginal 20s infinite linear;
}
#bicycleFlipped {
position: relative;
top: -120px;
animation: moveBicycleOriginal 20s -10s infinite linear;
}
#mainTxt {
letter-spacing: 7px;
font-size: 30px;
margin-bottom: 30px;
}
#keyframes moveBicycleOriginal {
from {
transform: translate(0, 0) rotate(0deg) translate(0, -50px);
}
26% {
transform: translate(350px, 0) rotate(0deg) translate(0, -50px);
}
30% {
transform: translate(350px, 0) rotate(90deg) translate(0, -50px);
}
46% {
transform: translate(350px, 150px) rotate(90deg) translate(0, -50px);
}
50% {
transform: translate(350px, 150px) rotate(180deg) translate(0, -50px);
}
76% {
transform: translate(0, 150px) rotate(180deg) translate(0, -50px);
}
80% {
transform: translate(0, 150px) rotate(270deg) translate(0, -50px);
}
96% {
transform: translate(0, 0) rotate(270deg) translate(0, -50px);
}
to {
transform: translate(0, 0) rotate(360deg) translate(0, -50px);
}
}
<div id="mainPage">
<div class="bicycle" id="bicycleOriginal"></div>
<p class="txt" id="mainTxt">DRAHTESEL</p>
<div class="bicycle" id="bicycleFlipped"></div>
</div>
So I tried to add a simple vibration animation to a link from my website but it simply doesn't work. Anyone see anything wrong with my code?
I took the animation code from animista.net and there they were working
Here is my code:
a {
text-decoration: none;
animation: vibrate 1s linear infinite both;
}
#keyframes vibrate {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
Drop me a line and let’s do cool things together!
You can set position: absolute or change display value to block-level (because a is inline by default) for transform to work.
a {
text-decoration: none;
display: block; /* Or inline-block */
animation: vibrate 1s linear infinite both;
}
#keyframes vibrate {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}
Drop me a line and let’s do cool things together!
The CSS animation is not used to target anchor.
so please use div for easy animation effects
<!DOCTYPE html>
<html>
<head>
<style>
.div {
text-decoration: none;
position:relative;
animation:vibrate 1s linear infinite both;
}
#keyframes vibrate {
0% {
transform: translate(0,0);
}
20% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(-2px, -2px);
}
60% {
transform: translate(2px, 2px);
}
80% {
transform: translate(2px, -2px);
}
100% {
transform: translate(0);
}
}
</style>
</head>
<body>
<div class="div">
Drop me a line and let’s do cool things together!
</div>
</body>
</html>
I am trying to create a CSS3 only animation that makes a span (one letter) look like it swings back and forth and then falls off the screen while turning. Here is my CSS:
#-webkit-keyframes swing {
10% { -webkit-transform: rotate(15deg); }
15% { -webkit-transform: rotate(-10deg); }
20% { -webkit-transform: rotate(5deg); }
25% { -webkit-transform: rotate(-5deg); }
30% { -webkit-transform: rotate(2deg); }
35% { -webkit-transform: rotate(-1deg); }
40% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { -webkit-transform: rotate(15deg); -webkit-transform:translate(0, 1500px); }
}
#keyframes swing {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
}
.animateone {
display: inline-block;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
And here is the result: Result
Why isn't the 'A' rotating as it falls?
You should write your transforms into a single statement:
#keyframes swing {
75% { transform: rotate(700deg) translate(0, 1500px); }
100% { transform: rotate(700deg) translate(0, 1500px); }
}
UPDATED
If you want rotate when falling, you should use two animations separately:
#keyframes translate {
10% { transform: translate(0, 0); }
15% { transform: translate(0, 0); }
20% { transform: translate(0, 0); }
25% { transform: translate(0, 0); }
30% { transform: translate(0, 0); }
35% { transform: translate(0, 0); }
40% { transform: translate(0, 0); }
75% { transform: translate(0, 1500px); }
100% { transform: translate(0, 1500px); }
}
#keyframes rotate {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(700deg); }
100% { transform: rotate(700deg); }
}
.rotate {
display: inline-block;
animation-name: rotate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
.translate {
display: inline-block;
animation-name: translate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
<header>
<h1>W.I.P.<?h1>
<h2>
A Text
<span class="translate">
<span class="rotate">A</span>
</span>
dventure
</h2>
</header>
In first place, you can only set a transform property at a time. If you want to combine 2, set them in a comma separate list. (ROX was right about this).
In the second place, order of the transforms is important. If you want the span to move while rotating, the order must be the one that you see in the snippet.
I have also changed the transform origin, to make it visually more smooth, and changed the animation to linear for the same reason. Nut of course you can adjust it as you want
#-webkit-keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
#keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
.animateone {
display: inline-block;
-webkit-animation: swing 3s infinite linear;
animation: swing 3s infinite linear;
transform-origin: top center;
}
<span class="animateone">A</a>