I'm trying create a simple animation that when a user hovers over an element, another element contained within it fills its parent. Currently, I have a JSFiddle that does just that.
BUT, I want to finish this with a few other features that I'm not sure I can actually do in CSS3.
I'm trying to find a way to, upon having the inner circle COMPLETELY fill its parent, (ie when its width/height = 300px), I'd like the fill to pause and not disappear after the animation is complete.
When a user moves their mouse outside the :hover range, I would like the animation to reverse direction as opposed to abruptly stopping.
I've gotten this far with CSS3 but am not sure I can implement these 2 features without resorting to Javascript. Does anyone know of a way of doing this entirely in CSS3/does anyone know if it is possible to do these last two features in CSS3, because I can't seem to find anything.
.circle {
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
overflow: hidden;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}
.filler {
width: 0px;
height: 0px;
background-color: red;
border: none;
position: relative;
left: 50%;
top: 50%;
border-radius: 150px;
-mox-border-radius: 150px;
-webkit-border-radius: 150px;
animation: empty 1s;
}
.circle:hover .filler {
animation: fill 2s;
-moz-animation: fill 2s;
-webkit-animation: fill 2s;
background-color: blue;
}
#keyframes fill
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-moz-keyframes fill /* Firefox */
{
from {background: red; height: 0px; width: 0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#-webkit-keyframes fill /* Safari and Chrome */
{
from {background: red; height:0px; width:0px;}
to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;}
}
#keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-moz-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
#-webkit-keyframes empty
{
to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;}
}
JS Fiddle
You don't need keyframes for this simple animation. Here is CSS you need:
.circle {
position: relative;
width: 300px;
height: 300px;
background-color: white;
border: 1px solid #000000;
border-radius: 150px;
overflow: hidden;
}
.filter {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-color: red;
border-radius: 0px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.circle:hover .filter {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 150px;
background-color: blue;
}
and HTML:
<div class="circle">
<div class="filter"></div>
</div>
Here is an example: http://jsbin.com/agekef/1/edit
I hope you can try out for this link might help you out
<http://jsfiddle.net/spacebeers/sELKu/3/>
<http://jsfiddle.net/SZqkb/1/>
<http://css-tricks.com/examples/DifferentTransitionsOnOff/>
Thanks
Related
From this question ("Rotate objects around circle using CSS?"), I copied the following code, but is it possible to insert pictures into the code? I would like to insert pictures into the circles so that one picture orbits another. For example, Earth orbiting the sun.
Earth: https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand
Sun: https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg
How do I modify the code in such a way as to make the earth orbit the sun instead of the blank circles?
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>
EDIT:
This is the output when I add the images:
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
background-image: url("https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg");
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
background-image: url("https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand");
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>
i just add background-image css to both element. And linking the earth and moon picture from Wikipedia to that element.
body{
background:#000;
}
.earth, .moon{
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.earth {
background-color: blue;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/9/90/Small_Earth.jpg" );
position: absolute;
width: 200px;
height: 200px;
box-shadow:0 0 20px dodgerblue;
margin:50px;
}
.moon {
position: relative;
background-color: white;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg" );
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
<div class="earth">
<div class="rotate">
<div class="counterrotate">
<div class="moon"></div>
</div>
</div>
</div>
You could try adding each image as a background-image right in the CSS rules that define their size/shape.
Add a background image to your elements. Open your inspector and click on the element and it will highlight the elements border-box, identify which element is what and then in your CSS, add a background:url(link to the image) to the selector/element you wish to have an image on.
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
background: url(https://cdn.pixabay.com/photo/2017/05/12/22/48/mouse-2308339__180.jpg) no-repeat;
border-radius: 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
display: block;
background: center url(https://as1.ftcdn.net/jpg/00/31/01/02/220_F_31010244_P6FGF9nfBY1oaGFndhdHhUUIfjHqMoib.jpg) no-repeat white;
background-size: 90%;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
I have a semi circle on the center of my page, which I want to be able to spin, I'm able to do some part of it by adjusting the width but I want a way to make it spin a complete 360degrees. If possible, I want to be able to accomplish it using only css, however if required I don't mind vanilla js (no Jquery).
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
width: 50px
}
to {
width: 0px;
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
Is this what you want?
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 50px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
transform-origin: left;
/*background-color: black;*/
animation: spinning infinite;
animation-duration: 3s;
}
#keyframes spinning {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
z-index: -5;
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
If I understand correctly you want the semicircle to revolve around your "hello" text. If so, you could use the transform: rotateY() style to spin your circle. If you do this, you can add your width to the circle div, as well as set the transform-origin to be the left-side of your element so that you rotate around the left-side of your semi-circle and not the center:
transform-origin: left;
width: 50px;
See example below:
body {
background-color: lightblue;
}
#txt {
position: fixed;
left: 50%;
transform: translate(-50%, 0);
top: 40%;
font-size: 30px;
color: white;
}
#spinCircle {
position: fixed;
left: 50%;
top: 15%;
height: 50vh;
width: 200px;
border-radius: 0 150px 150px 0;
border-color: black;
color: black;
border-style: solid;
border-left-style: none;
animation: spinning linear infinite;
animation-duration: 3s;
transform-origin: left;
width: 50px;
}
#keyframes spinning {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
<div id="txt">Hello</div>
<div id="spinCircle" />
I was wondering if anyone knew how to make an object in this case my ball div appears like it is coming at the screen. Something that is sort of a 3D effect if that makes sense. My code is attached to the bottom.
var ballMotion = gsap.timeline();
ballMotion
.to(".circle", {duration: 3, transform: 'scale(14)'})
body {
width: 300px;
margin: 20px auto;
}
.circle {
display: block;
background: black;
border-radius: 100%;
height: 300px;
width: 300px;
margin: 0;
background: radial-gradient(circle at 100px 100px, #FE0, #FAFAD2);
}
<figure class="circle"></figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
I see you are using gsap.js, I am unsure exactly how this is working but in pure css you can use transform-style: preserve-3d; and the use perspective() and translateZ() and the #keyframes. I am sure with knowledge of Green Sock you can getting this working. see code below:
CSS
.wrapper--outer {
display: flex;
justify-content: center;
position: relative;
margin: 0;
width: 100%;
height: 100%;
padding: 1px;
}
.snowman {
display: flex;
justify-content: center;
position: absolute;
top: 18vh;
height: 200px;
width: 200px;
}
.snowball {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: blue;
position: absolute;
top: 10%;
left: 50%;
perspective: 550px;
transform-style: preserve-3d;
animation-name: snowball;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 2s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: forwards;
}
#keyframes snowball {
0% {
transform: perspective(550px) translateZ(200px);
}
100% {
transform: perspective(1000px) translateZ(999px);
}
}
<body>
<div class="wrapper--outer">
<div class="snowman">
<div class="snowball"></div>
</div>
</div>
</body>
JSBin
https://jsbin.com/ropomoquxu/edit?html,css,output
I am trying to animate a small rectangular div that is centered/fixed at the top of the screen and will scale from the center into a full screen overlay. Here is a wireframe of the animation I am trying to create.
I have a solution now but it is definitely not the most clean or elegant:
<div class="step1"></div>
.step1 {
border:none;
background:none;
text-align: Center;
font-size: 1.6em;
height: 200px;
width: 300px;
background-color: blue;
position: fixed;
left: 47%;
margin-left: -1.75em;
top: 0;
z-index: 1;
transition: all .2s;
}
.step2 {
height: 100%;
width: 100%;
left: 0%;
top: 0;
margin: 0;
border:none;
background:none;
color: white;
text-align: Center;
background-color: blue;
position: fixed;
z-index: 1;
border-radius: 0;
}
I am also getting a janky animation and I know there must be a better way. Can anyone offer a cleaner solution?
You can .toggleClass() on .click():
$('div').click(function() {
$(this).toggleClass('step');
});
div {
width: 300px;
height: 200px;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%); /* makes it horizontally centered */
background: blue;
transition: all .3s linear; /* added linear transition effect, it's "ease" by default */
}
.step {
width: 100vw; /* 100% of the viewport width */
height: 100vh; /* 100% of the viewport height */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I'd suggest using css animations like so
.step1 {
border:none;
background:none;
text-align: Center;
font-size: 1.6em;
height: 200px;
width: 300px;
background-color: blue;
position: fixed;
left: 47%;
margin-left: -1.75em;
top: 0;
z-index: 1;
transition: all .2s;
animation-name:demo;
animation-duration:2s;
animation-fill-mode:forwards;
}
#keyframes demo{
0%{height:200px;width:300px;left:47%;margin-left:-1,75em}
100%{height:100%;width:100%;left:0;margin-left:0}
}
<div class="step1"></div>
Here's my approach. You trigger the animation by hovering over the div. I decided to use transition because It's more practical for simple applications like this.
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
background-color: #ff0000;
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0px;
left: 50%;
transition: width 10s, height 10s, left 10s;
}
div:hover {
width: 100%;
height: 100%;
left: 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Check the following demo:
$(document).ready(() => {
setTimeout(() => {
$('#myDiv').toggleClass('step1 step2');
},1000);
});
#myDiv {
position: fixed;
top: 0;
background-color: blue;
transition: all .2s;
}
.step1 {
left: 35%;
right: 35%;
height: 100px;
}
.step2 {
left: 0;
right: 0;
height: auto;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv" class="step1"></div>
Here is an easy solution:
body {
margin: 0;
height: 100vh;
}
div {
width: 300px;
margin: auto;
height: 200px;
background: blue;
animation: animate 3s linear 1s forwards;
}
#keyframes animate {
to {
width: 100%;
height: 100%;
}
}
<div></div>
I have tiles which expand on hover event but they are partly covered by adjacent tiles, how can i fix this?
css code snippet:
.tile {
position: absolute;
width: 86px;
background-color: #000000;
height: 86px;
color: #fff;
transition: 1s linear all;
overflow: hidden;
}
.tile:hover {
background-color: #333333;
height: 172px;
width: 172px;
}
here is a link to my fiddle: https://jsfiddle.net/zjcfope1/
Add z-index to the tile class. Check out this updated fiddle
.tile {
position: absolute;
width: 86px;
background-color: #000000;
height: 86px;
color: #fff;
transition: 1s linear all;
overflow: hidden;
z-index: -9999;
}
.tile:hover {
background-color: #333333;
height: 172px;
width: 172px;
z-index: 9999;
}
is this is you want just try this.
.tile:hover {
background-color: #333333;
height: 172px;`
width: 172px;
z-index:1000;
}