I've just created a simple page with some text and a picture, but I can't figure it out how I can make the image flip.
body {
background-color: pink;
font-family: 'Courier New', Courier, monospace;
}
img {
display: block;
margin: 0 auto;
#keyframes flip {
0% {
transform: rotate3d(0, 0, 0);
}
100% {
transform: rotate3d(360deg, 360deg, 360deg);
}
}
}
As Deepak Kamat mentioned, you can find reference on how to use it searching on google, such as this example, which shows how animation and keyframs work together in css.
img {
animation: flip 3s infinite;
width: 100px;
height: 100px;
}
#keyframes flip{
0% {transform: rotate3d(0,0,0,0);}
20% {transform: rotate3d(0,1,0,360deg);}
40% {transform: rotate3d(0,0,0,360deg);}
60% {transform: rotate3d(1,0,0,180deg);}
80% {transform: rotate3d(0,0,1,360deg);}
100% {transform: rotate3d(1,0,0,360deg);}
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/800px-Google_%22G%22_Logo.svg.png" alt="Google Logo Image">
Related
I am new to CSS animations so I made this little project in which there is a box bouncing and it looks pretty real. I want the text inside the box (at the beginning it is just a 0) to increment by one every time the box bounces/the animation is complete. I tried using a counter but it keeps on resetting.
Here is my code:
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter::before {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
content: counter(bounceCount);
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
counter-reset: bounceCount, calc(counter(bounceCount)+1)
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
counter-increment: bounceCount;
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
I am open to any suggestions including CSS, HTML, Jquery, JS, etc...
I would also appreciate it if someone could also explain why their code works... Many times I see answers on this website that have only code and no explaining. Please explain!
By it's definition, counter-increment is a non-animatable css property - that's why you're not being successful in using it in your animation. You would have to use a javascript function to count the bounces. As the animation duration is 2 seconds, one approach would be to use a set-interval approach and increment your counter every 2 seconds.
document.getElementById('counter').innerHTML = 0;
function increment() {
var x = document.getElementById('counter').innerHTML;
//if we declare the x value as 0, it will keep resetting,
//so instead, put we retrieve the initial value from the span
//and set the variable to that value
x++;
//increase by 1
document.getElementById('counter').innerHTML = x; //set span value
}
setInterval(increment, 2000); //1000ms in 1 sec
* {
font-family: sans-serif;
}
#container {
border-bottom: 3px solid #444;
display: flex;
height: 330px;
width: 100%;
}
#oboing {
align-self: flex-end;
animation-duration: 2s;
animation-iteration-count: infinite;
background-color: black;
height: 200px;
margin: 0 auto 0 auto;
transform-origin: bottom;
width: 200px;
}
#counter {
color: white;
position: relative;
left: 40%;
top: 40%;
font-size: 50px;
}
#oboing {
animation-name: oboing;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
}
#keyframes oboing {
0% {
transform: scale(1, 1) translateY(0);
}
10% {
transform: scale(1.1, .9) translateY(0)
}
30% {
transform: scale(.9, 1.1) translateY(-100px);
}
50% {
transform: scale(1.05, .95) translateY(0)
}
57% {
transform: scale(1, 1) translateY(-7px);
}
64% {
transform: scale(1, 1) translateY(0)
}
100% {
transform: scale(1, 1) translateY(0);
}
}
body {
background: linear-gradient(191deg, #3a22bd, #ea2b0b);
background-size: 400% 400%;
height: 100vh;
overflow: hidden;
-webkit-animation: Colors 4s ease infinite;
-moz-animation: Colors 4s ease infinite;
-o-animation: Colors 4s ease infinite;
animation: Colors 4s ease infinite;
}
#-webkit-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-moz-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-o-keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#keyframes Colors {
0% {
background-position: 0% 52%
}
50% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
<div id='container'>
<div id='oboing'>
<span id='counter'>0</span>
</div>
</div>
Hope this clears things up for you! :)
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'm trying to play with css3 and its animation and keyframe system but i'm running out of idea's to get this to work..
I rely on this animation that I found on codepen, and I would like to reverse the text revealing ('Escape' move to right and 'into amazing experiences' is revealing right to left)
Here is the CSS:
body {
text-align:center;
background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-family:'Roboto';
font-weight:300;
font-size:32px;
padding-top:40vh;
height:100vh;
overflow:hidden;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0,0,0);
}
div {
display:inline-block;
overflow:hidden;
white-space:nowrap;
}
div:first-of-type {
animation: showup 7s infinite;
}
div:last-of-type {
width:0px;
animation: reveal 7s infinite;
}
div:last-of-type span {
margin-left:-355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width:355px;}
80% {opacity:1;}
100% {opacity:0;width:355px;}
}
I tried a lot of things such as adding float, margin, display or edit the keyframes but nothing did the job. The only remarkable change in this animation is the width div so I don't know how to make it work in a reverse situation.
Hoping someone could help me!
This could be help
body {
text-align: center;
background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
color:#555;
font-weight: 300;
font-size: 32px;
padding-top: 40vh;
height: 100vh;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
div {
display: inline-block;
overflow: hidden;
white-space: nowrap;
font-size: 30px;
line-height: 1.5;
}
div.lr {
width: 0px;
animation: reveal 7s infinite;
}
div.rl {
animation: showup 7s infinite;
}
div.rl span {
margin-left: -355px;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {opacity:0;}
20% {opacity:1;}
80% {opacity:1;}
100% {opacity:0;}
}
#keyframes slidein {
0% { margin-left:-800px; }
20% { margin-left:-800px; }
35% { margin-left:0px; }
100% { margin-left:0px; }
}
#keyframes reveal {
0% {opacity:0;width:0px;}
20% {opacity:1;width:0px;}
30% {width: 375px;}
80% {opacity:1;}
100% {opacity:0;width: 375px;}
}
<div class="lr">
<span>into amazing experiences</span>
</div>
<div class="rl">Escape</div>
You just need to specify animation-direction and set it to reverse. See more about animation-direction property. Here's codepen with reversed animation.
Is there a way to have two arrows "bouncing" in separate directions using CSS?
I have the following code on my site (domainmarket.io), which produces one bouncing arrow (which can be seen on the top left-hand corner), but I would like another arrow bouncing in another direction, but can't figure out how.
HTML
<div class="arrow bounce"></div>
<div class="topbarleft">
<a href="javascript:showhide('uniquename')">
<p><?php echo wp_kses_post( $ocin_topbar_text ); ?></p>
</a>
<div class="rightarrow bounceright"></div>
</div>
CSS
#-webkit-keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-webkit-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(-30px);
}
60% {
transform: translateX(-15px);
}
}
#keyframes bounce{
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
60% {
-ms-transform: translateX(-15px);
transform: translateX(-15px);
}
}
#-webkit-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
40% {
-webkit-transform: translateX(30px)!important;
transform: translateX(30px)!important;
}
60% {
-webkit-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
#-moz-keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
transform: translateX(0);
}
40% {
transform: translateX(30px)!important;
}
60% {
transform: translateX(15px)!important;
}
}
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px) !important;
transform: translateX(30px)!important;
}
60% {
-ms-transform: translateX(15px)!important;
transform: translateX(15px)!important;
}
}
.arrow {
margin-top:0px;
width: 24px;
height: 24px;
float: left;
margin-right: 10px;
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrow-1.png');
background-repeat: no-repeat;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
.rightarrow.bounceright {
background-image: url('http://domainmarket.io/wp-content/uploads/2016/04/arrowright.png');
background-repeat: no-repeat;
float: left;
width: 24px;
height: 24px;
display: inline-block;
}
As you can see in my CSS code, I've tried to change the #keyframes to bounceright to see if that would work, but it hasn't.
Got it figured out!
In the CSS file
.bounceright {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
SHOULD BE
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
Somehow, you adding !important to the bounceright keyframes disabled them. Remove it and it works.
Declarations in #keyframes that are marked with !important are ignored. See here: https://developer.mozilla.org/en/docs/Web/CSS/#keyframes#!important_in_a_keyframe
So here is the end result:
#keyframes bounceright {
0%, 20%, 50%, 80%, 100% {
-ms-transform: translateX(0);
transform: translateX(0);
}
40% {
-ms-transform: translateX(30px);
transform: translateX(30px)
}
60% {
-ms-transform: translateX(15px);
transform: translateX(15px);
}
}
Edit: also, as the author of the question explained, change "bounce" with "bounceright" in the .bounceright CSS rule:
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
However, I found a much simpler solution to all of this: instead of using another arrow and another class, just use the same. So instead of:
<div class="rightarrow bounceright"></div>
use
<div class="reverse"><div class="arrow bounce"></div></div>
with the CSS rule:
.reverse {
transform: rotate(180deg);
display:inline-block;
}
This way there is no duplication of the same code just to reverse the direction of the arrow.
Using keyframe animation, the div with an id of "Second" animates slightly before the "first" div starts to. Here is my code shouldn't they move at the same speed by default? any help would be great thanks.
body { background-color: black; color: white;}
#First { width: 200px;
height: 50px;
position: absolute;
top:5px;
color: black;
text-align: center;
background-color: yellow;
-webkit-transform-origin: top;
-webkit-animation: myfirst 1s;
-webkit-transform:rotateX(90deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes myfirst
{
0% {-webkit-transform:rotateX(0deg);}
100% {-webkit-transform:rotateX(90deg);}
}
#Second { width: 200px;
height: 50px;
position: absolute;
top:5px;
left:200px;
color: black;
text-align: center;
background-color: green;
-webkit-transform-origin: bottom;
-webkit-animation: mysecond 1s;
-webkit-transform:rotateX(0deg);
-webkit-animation-iteration-count: infinite;
}
#-webkit-keyframes mysecond
{
0% {-webkit-transform:rotateX(90deg);}
100% {-webkit-transform:rotateX(0deg);}
}
and the HTML,
<div id="First">FIRST</div>
<div id="Second">SECOND</div>
Code on jsfiddle: http://jsfiddle.net/x3p64/
Demo
#-webkit-keyframes were different for both
As per requirements
New Demo
#-webkit-keyframes myfirst {
0% {
-webkit-transform: scaleY(0);
}
20% {
-webkit-transform: scaleY(0.2);
}
40% {
-webkit-transform: scaleY(0.4);
}
60% {
-webkit-transform: scaleY(0.6);
}
80% {
-webkit-transform: scaleY(0.8);
}
100% {
-webkit-transform: scaleY(1);
}
}
#-webkit-keyframes mysecond {
0% {
-webkit-transform: scaleY(1);
}
20% {
-webkit-transform: scaleY(0.8);
}
40% {
-webkit-transform: scaleY(0.6);
}
60% {
-webkit-transform: scaleY(0.4);
}
80% {
-webkit-transform: scaleY(0.2);
}
100% {
-webkit-transform: scaleY(0);
}
}
It's not that it is starting before, it just looks like it because of the easing properties. Both animations are starting and stopping at the same time, they just look different. Try using a linear easing on both.
-webkit-animation: mysecond 1s linear;