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.
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.
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
I have made a little animation that add a line under the box from the left to the right when it's hovered and the line go back from the left to the right when the mouse isn't hovering the box, but the issue is that the line goes back from the left to the right when I refresh the page. Is there a solution to disable the animation when I open the page or when I refresh it (if possible without JavaScript)
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box:hover::after {
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<div class="box"></div>
I changed your animation to a transition instead. Is this what you're after?
body {
background-color: black;
}
.box {
width: 100px;
height: 100px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
width: 100%;
height: 3px;
background-color: #fff;
transform: scaleX(0);
transform-origin: right center;
transition: transform 400ms linear;
}
.box:hover::after {
transform: scaleX(1);
transform-origin: left center;
}
<div class="box"></div>
I don't believe this is possible using only css - you can use a css declaration when a mouse-over ends, however it will always trigger upon load.
You can however use simple JS using classes "on" and "off" to differentiate 'page load' and 'hover off'.
The code in this instance would be:
demo
$(".box").hover(
function () {
$(this).removeClass('off').addClass('on');
},
function () {
$(this).removeClass('on').addClass('off');
}
);
body {
background-color: black;
}
.box {
width: 200px;
height: 200px;
margin: 40px auto;
background-color: #f44336;
position: relative;
}
.box::after {
content: '';
position: absolute;
bottom: -7px;
height: 3px;
background-color: #fff;
}
.box.off::after {
width: 100%;
animation: out 400ms linear forwards;
transform-origin: right center;
}
.box.on::after {
width: 100%;
animation: in 400ms linear;
transform-origin: left center;
}
#keyframes in {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#keyframes out {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
I'm playing round with CSS animation by trying to replicate the following new google ads logo - example.
What is the best way to add the bounce effect on the green ball?
My current animation:
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
My code (fiddle):
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock 1.5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
I've tried with this animation
animation: greenblock .6s ease-in-out .5s forwards;
and this set of keyframes
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
Demo
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock .6s ease-in-out .5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
Inspired by this tutorial http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/ I decided to make pure css version of similar effect.
And it looks good and work pretty smooth. What bothers me is why after few attempts I had to set keyframes at 24% and 74% instead of 50%? With 50% animation looks choppy. I really don't like to do things blindfolded, so I'll be grateful for help.
Here is quick dirty implementation:
html {
background: #ccc;
}
.card {
position: relative;
display: inline-block;
height: 400px;
width: 200px;
background: #000;
margin: 50px;
overflow: hidden;
}
.card-head {
position: absolute;
background: #000;
height: 400px;
width: 400px;
border-radius: 50%;
left: -100px;
top: -173px;
z-index: 10;
-webkit-animation-name: carda;
animation-name: carda;
}
.card-extend {
position: absolute;
background: #fff;
height: 400px;
width: 400px;
bottom: -200px;
left: -100px;
z-index: 5;
-webkit-animation-name: cardb;
animation-name: cardb;
}
.card-animated {
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
}
.card:hover .card-head,
.card:focus .card-head{
-webkit-animation-name: cardhovera;
animation-name: cardhovera;
}
.card:hover .card-extend,
.card:focus .card-extend{
-webkit-animation-name: cardhoverb;
animation-name: cardhoverb;
}
#-webkit-keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#-webkit-keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#-webkit-keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#-webkit-keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
#keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
<div tabindex="0" class="card">
<div class="card-head card-animated">
</div>
<div class="card-extend card-animated">
</div>
</div>
I think this choppy effect you are talking about has more to do with the way animation in css work. As the easing is applied to the whole extension of it, this means, imagine some keyframes like this:
#keyframes exampleFrames {
0% {
transform: translateX(50px)
}
50% {
transform: translateX(0)
}
100% {
transform: translateX(50px)
}
}
Even though you can add easing to the animation the element affected will start at 50 pixels to the right and start moving to the left to it's initial position and in the center frame will suddenly change direction to get to the last position again. The issue is with this sudden change, this is what makes it choppy.
To avoid this you might need to use javascript or, as you've seen tweak the keyframes to minimise this undesirable visual effect.