I'm trying to created a continuous wobble animation on a div id, and its not working for me. Any help would be greatly appreciated.
This is my code:
.figure {
display: inline-block;
width: 200px;
height: 200px;
background: rgb(23, 147, 219);
padding: 40px;
box-shadow: inset -5px -15px rgba(0, 0, 0, .06);
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 50%;
animation: wobble 5s ease-in-out infinite;
transform-origin: center bottom;
transition: padding .3s, bottom .3s;
text-align: center;
}
#keyframes wobble {
33% {
transform: rotate(5deg);
}
66% {
transform: rotate(-5deg);
}
}
<div class="figure" ></div>
Actually it is working , but since it is a sphere you can't notice it rotating , remove border-radius to see it. Also use alternate to see better effect
animation:wobble 5s ease-in-out infinite alternate;
also use 0% to 100% animation for better result.
Related
I've tried to create a button that animates to the left, and then back ti the right again, to it's normal state. Animation doesn't work with this code:
.fortnite-wrapper .btn.btn-display:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2em;
background-color: #ff0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
-webkit-box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
-webkit-animation: jelly 6s ease-in-out infinite;
animation: jelly 6s ease-in-out infinite;
-webkit-transform-origin: 50% 50% 20px;
-ms-transform-origin: 50% 50% 20px;
transform-origin: 50% 50% 20px;
}
Left side of the button should expand to the left for 20 px and then go back, animation is infinite.
HTML for button:
<div class="fortnite-wrapper">
<button class="btn download-button btn-primary btn-display play-free">
<span>Fortnite</span></button>
</div>
First off, you didn't define the animation jelly, which is needed to tell the element which properties to animate.
Secondly, animation-direction: alternate makes the animation reverse itself after completion. This is neccessary in order to keep the element from jumping back to the start. In this snippet I put it into animation: jelly 2s ease-in-out infinite alternate;.
.fortnite-wrapper {
position: relative;
width: 200px;
}
.fortnite-wrapper .btn.btn-display:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 2em;
background-color: #ff0;
-webkit-transition: background-color .3s ease-in-out;
-o-transition: background-color .3s ease-in-out;
transition: background-color .3s ease-in-out;
-webkit-box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .5);
-webkit-animation: jelly 2s ease-in-out infinite alternate;
animation: jelly 2s ease-in-out infinite alternate;
-webkit-transform-origin: 50% 50% 20px;
-ms-transform-origin: 50% 50% 20px;
transform-origin: 50% 50% 20px;
}
#keyframes jelly {
0 {
width: 100%;
}
100% {
width: calc(100% - 20px);
}
}
<div class="fortnite-wrapper">
<button class="btn download-button btn-primary btn-display play-free">
<span>Fortnite</span></button>
</div>
Edit: In order for the animation to only affect the left side of the block without changing the rest of it, I recommend animating the property width instead. If you use it in combination with position: absolute and right: 0 the element will in- and decrease in size on the left side.
.outer {
margin: 50px;
}
.button {
border: 1px solid black;
border-radius: 3px;
width: 100px;
height: 30px;
display: block;
background: linear-gradient(to right, black 50%, white 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all .5s ease-out;
}
.button:hover {
background-position: left bottom;
}
.text {
text-align: center;
font-size: 16px;
line-height: 30px;
color: black;
transition: all .6s ease-out;
display: block;
}
.text:hover {
color: white;
}
<div class="outer">
<div class="button">
<div class="text">button</div>
</div>
</div>
I've created this snippet on Codepen: the earth rotates and the car moves. However, when car moves it makes the earth rotate too. I want all elements to go their own path.
Why does the car affect the earth, and how can that be avoided?
body {
background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg);
background-size: 1000px;
}
#firstimg {
background-image: url(http://www.21tech.ir/dfxhfgh.gif);
position: absolute;
background-repeat: no-repeat;
background-size: 100px;
animation: anim1 14s infinite linear;
margin: 40px;
}
#earth {
margin-left: 100px;
width: 500px;
height: 500px;
background: url(http://www.drodd.com/images14/map-of-earth1.jpg);
border-radius: 50%;
background-size: 1000px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
filter: brightness(50%);
}
#keyframes rotate {
from {
background-position-x: 0px;
}
to {
background-position-x: 1000px;
}
}
#keyframes anim1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
50% {
transform: translate(20px, 20px) rotate(10deg)
}
}
<div id="firstimg">
<div>
<div id="earth"></div>
You have not closed you firstimg div tag, hence it runs under a single div
<div id="firstimg"></div>
<div id="earth"></div>
Follow Codepen
i'm recently experiencing an issue with white blocks appearing on the top/bottom of site whenever i scroll it a greater bit. The white blocks are part of body background, because changing body backgroundcolor makes blocks change color too.
I have already tried setting opacity for body but this gave no effect at all... Any ideas what could possibly be going wrong? Or maybe i just have too heavy transition/fade content so that rendering doesn't work smooth?
Here's the screenshot of the issue, pretty hard to catch on ss since it only happens for half sec when scrolling. The block is indicated by red arrows.
EDIT:
I'd actually post parts of my css file, maybe this would bright any clue:
html, body {
height: 100%;
position: static;
overflow-x:hidden;
-webkit-transform: translate3d(0, 0, 0);
background-color: rgba(255, 255, 255, 0.06);
transform: translate3d(0,0,0);
}
.heroEffects .bg {
-webkit-backface-visibility: hidden;
transform: scale(1);
-webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
-moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
transform: translate3d(0,0,0);
}
.bgimg {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
transform: scale(1);
overflow: hidden;
-webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
-moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("../img/gallery/slonecz.jpg");
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 15s;
animation-delay: 5s;
-webkit-animation-delay: 5s
-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 15s;
transform: translate3d(0,0,0);
}
#keyframes backgroundchangeFadeInOut {
0% {
background-image: url("../img/gallery/slonecz.jpg");
}
15% {
background-image: url("../img/gallery/slonecz.jpg");
}
30% {
background-image: url("../img/gallery/slonecz.jpg");
}
42% {
background-image: url("../img/gallery/slonecz.jpg");
}
50% {
background-image: url("../img/gallery/motyl.jpg");
}
68% {
background-image: url("../img/gallery/motyl.jpg");
}
80% {
background-image: url("../img/gallery/motyl.jpg");
}
95% {
background-image: url("../img/gallery/motyl.jpg");
}
100% {
background-image: url("../img/gallery/slonecz.jpg");
}
}
.heroEffects .shade {
opacity: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 3;
height: 100vh;
position: fixed;
width: 100%;
}
And here's Vimeo vid, the screen recorder seems to be on top and you can actually see what happens when the browser with this site is in the background... https://vimeo.com/198493320
In my case using overflow: hidden; on body worked.
body {
overflow: hidden;
}
this works for me on chrome 76.0.3809.87
overflow: auto;
hope it can help.
I created a button. This button is defined by these CSS properties:
#button {
width: 50px;
height: 50px;
border: 3px solid #F1F2F0;
text-align:center;
background-color: #02BFC1;
display: table;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right:0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
animation: blinker 2s ease infinite;
}
This button blinks using the animation blinker that smoothly changes the background-color from a darker to a lighter blue, defined like this:
#keyframes blinker {
50% { background-color: #03FCFF; }
}
It also has a hover animation:
#button:hover {
background-color: #F37C2B;
transform: scale(1.1);
box-shadow: 0px 0px 70px rgba(0,0,0,0.4);
animation-name: none;
}
My problem is this: the hover animation used to be completely smooth before I added the blinker animation. Now, it just instantly changes background-colorto the orange, while the transform: scale(1.1) still changes smoothly.
How can I make it so that hovering the button pauses the blinker animation and smoothly changes background-color, and that the animation resumes by mouse-leaving the button? If possible, I would like to use only CSS for this and no js.
If you prefer, you can modify this JSFiddle to respond.
EDIT: This doesn't work only on chrome, how can I make it so it does?
You have too many things going on in your CSS. As a general rule try to keep things as simple as possible if you want your code to be fast and efficient.
Here is your working code with some explanations:
button {
width: 50px;
height: 50px;
display: block;
border: 3px solid #F1F2F0;
background-color: #02BFC1;
margin: 30px auto;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4);
animation: 2s ease infinite blinker;
transition: background-color .5s ease, transform .5s ease, box-shadow .5s ease; /* it is best to select the properties you want to transition instead of using 'all' */
}
#keyframes blinker {
50% {
background-color: #03FCFF;
}
}
button:hover {
background-color: #F37C2B;
box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.4);
animation: none;
transform: scale(1.1);
}
<button></button>
Don't forget to use the prefixes needed for your project.
I'm trying to learn a bit about css animations, and decided to try making a book with page turns (fixed animations not draggable)
I got the animations working well enough and now I'd like to stack pages on top of each other to form a book. From what I can tell when the page flips, the outer div still occupies the original space, blocking my click event on the underlying page.
How can I get around this?
Here's a plunk demonstrating my issue http://plnkr.co/edit/2fPMgUvEKhdJLxJOOeBg
and the relevant CSS
.flipPage {
animation: flip-page 1s 0s 1 linear alternate;
animation-fill-mode: forwards;
}
.flipPageBack {
animation: flip-page-back 1s 0s 1 linear alternate;
animation-fill-mode: forwards;
}
.flipper {
width:200px;
height:200px;
transform-origin: right;
transform-style: preserve-3D;
}
.flipper > .front, .back {
position:absolute;
width: inherit;
height: inherit;
backface-visibility: hidden;
}
.flipper > .front {
z-index: 2;
background-color:coral;
box-shadow: inset -10px 0px 10px 0px rgba(0,0,0,0.25);
}
.flipper > .back {
background-color:lightcoral;
transform: rotatey(180deg);
box-shadow: inset 10px 0px 10px 0px rgba(0,0,0,0.25);
}