i was wondering how to make a circle that transforms into a wider box in html/css.
I have tried this but it does not transform properly
If you guys have any ideas on how to make this, i would really appreaciate it very much thank you!
.circle{
width: 700px;
height:700px;
margin:0 auto;
background-color: #14b1e7;
animation-name: stretch;
animation-duration:6s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-duration:alternate;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
opacity: 100%;
text-align: center;
text-shadow: 5px;
font-size: 60px;
font-weight: bold;
border-radius: 30px;
}
#keyframes stretch {
0%{
transform: scale(.1);
background-color:#14b1e7;
border-radius: 100%;
}
50%{
background-color: #14b1e7;
}
100%{
transform:scale(.7);
background-color: #14b1e7;
}
}
Here's a live example: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css
.circle {
width: 100px;
border-radius: 50%;
transition: all 1s;
}
.circle:hover {
border-radius: 0;
width: 200px;
}
In the example, the circle initially has 50% border-radius and 100px width. On hover, border-radius is set to 0 and width to 200px. Because of the transition property, the change is animated.
The transition: all 1s property makes every property change gradually and last for 1 second. Check the docs for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
You can simply change border-radius according to the keyframes.
.animation {
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 100px;
background-color: black;
border: 1px solid #337ab7;
border-radius: 100% 100% 100% 100%;
animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
#keyframes circle-to-square {
0% {
border-radius:100% 100% 100% 100%;
background:black;
}
25% {
border-radius:75% 75% 75% 75%;
background:black;
}
50% {
border-radius:50% 50% 50% 50%;
background:black;
}
75% {
border-radius:25% 25% 25% 25%;
background:black;
}
100% {
border-radius:0 0 0 0;
background:black;
}
<div class="container animated zoomIn">
<div class="row">
<div class="animation"></div>
</div>
</div>
Related
I took this Pen: https://codepen.io/golle404/pen/BoqrEN and wanted to make it move every few seconds.
I tried this:
setTimeout(function() {
document.getElementById("move").style.transform = "rotateY(203deg)";
}, 2000);
but this moves the object once and I want to make the cube spin infinite with 3 stops.
So like the cube rotates to 203deg and should stay there for 2 seconds and move to 180deg for example - in a infinite loop.
Is there a way to do it ? Or is it not possible.
You can use a keyframe animation for this.
For example:
#keyframes rotation {
0%, 100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
And then you use it like this
.my-element {
animation: rotation 5s infinite;
}
Here it is in combination with your code from the codepen:
.container {
margin-top: 150px;
}
.news-grid {
width: 300px;
margin: auto;
}
.news-card {
width: 300px;
height: 300px;
perspective: 800px;
perspective-origin: 50% 50%;
outline: 1px solid blue;
}
.face>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#experiment {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 200px;
perspective: 800px;
perspective-origin: 50% 200px;
}
.cube {
position: relative;
margin: auto;
height: 300px;
width: 300px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
transition: transform 2s linear;
transform-style: preserve-3d;
transform: rotateY(245deg);
animation: rotation 5s infinite;
}
.face {
position: absolute;
height: 260px;
width: 260px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
font-size: 27px;
line-height: 1em;
color: #fff;
border: 1px solid #555;
border-radius: 3px;
}
#keyframes rotation {
0%,
100% {
transform: rotateX(90deg) translateZ(-150px);
}
33.333% {
transform: translateZ(150px);
}
66.666% {
transform: rotateY(90deg) translateZ(150px);
}
}
<div class="container">
<div class="news-grid">
<div class="news-card">
<div class="cube">
<div class="face one"></div>
<div class="face two">
<img src="http://images.sixrevisions.com/2010/10/13-01_information_architecture_101_ld_img.jpg" alt="" /></div>
<div class="face three">
Information Architecture 101: Techniques and Best Practices
</div>
</div>
</div>
</div>
</div>
You need to use setInterval, not setTimeout
I want to create the letter z in animation.
In such a way that the first part (1) appears without delay with animation from left to right.
When the first part (1) reaches the right, the second part (2) will appear from top to bottom with animation.
When the second part (2) is down, the third part (3) will appear from left to right with animation.
The problem with this animation is that all three parts (1-2-3) appear together, while I want them to appear alternately and late.
Thank you in advance for your cooperation.
#global{
width:200px;
position:relative;
cursor:pointer;
height:200px;
background-color: black;
padding: 1rem;
}
.mask{
position:absolute;
border-radius:2px;
overflow:hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane{
background:#ffffff;
width:400%;
height:100%;
position:absolute;
transform : translate3d(0px,0,0);
z-index:100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane{
z-index:2000;
animation: trans1 1s ease-in infinite 0s forwards;
-webkit-animation: trans1 1s ease-in infinite 0s forwards;
}
#middle .plane{
transform: translate3d(0px,0,0);
background: #bbbbbb;
animation: trans2 1s linear infinite 2s forwards;
-webkit-animation: trans2 1s linear infinite 2s forwards;
}
#bottom .plane{
z-index:2000;
animation: trans3 2s ease-out infinite 4s forwards;
-webkit-animation: trans3 2s ease-out infinite 4s forwards;
}
#top{
width:200px;
height:15px;
left:0;
z-index:100;
transform: skew(-15deg, 0);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#middle{
width:187px;
height:25px;
left:6px;
top:78px;
transform:skew(-15deg, -40deg);
-webkit-transform:skew(-15deg, -40deg);
-moz-transform:skew(-15deg, -40deg);
-ms-transform:skew(-15deg, -40deg);
-o-transform:skew(-15deg, -40deg);
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
#bottom{
width:200px;
height:15px;
top:159px;
transform: skew(-15deg, 0);
-webkit-transform: skew(-15deg, 0);
-moz-transform: skew(-15deg, 0);
-ms-transform: skew(-15deg, 0);
-o-transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2{
0% {
width: 0%;
left: 100%;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3{
0% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
This snippet thinks of things slightly differently.
Each line has a 3 second animation with the top one animating to its full width in the first second, ie the first 33.33% of the time, the second animating to its full width in the second second and the third in the third second.
That way aspects such as the lines not being visible to start with are dealt with.
#global {
width: 200px;
position: relative;
cursor: pointer;
height: 200px;
background-color: black;
padding: 1rem;
}
.mask {
position: absolute;
border-radius: 2px;
overflow: hidden;
perspective: 1000;
backface-visibility: hidden;
}
.plane {
background: #ffffff;
width: 400%;
height: 100%;
position: absolute;
transform: translate3d(0px, 0, 0);
z-index: 100;
perspective: 1000;
backface-visibility: hidden;
}
#top .plane {
z-index: 2000;
animation: trans1 3s ease-in infinite forwards;
}
#middle .plane {
transform: translate3d(0px, 0, 0);
background: #bbbbbb;
animation: trans2 3s linear infinite forwards;
}
#bottom .plane {
z-index: 2000;
animation: trans3 3s ease-out infinite forwards;
}
#top {
width: 200px;
height: 15px;
left: 0;
z-index: 100;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#middle {
width: 187px;
height: 25px;
left: 6px;
top: 78px;
transform: skew(-15deg, -40deg);
border-radius: 20px;
}
#bottom {
width: 200px;
height: 15px;
top: 159px;
transform: skew(-15deg, 0);
border-radius: 20px;
}
#keyframes trans1 {
0% {
width: 0%;
left: 0;
}
33.33% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans2 {
0% {
width: 0%;
left: 100%;
}
33.33% {
width: 0%;
left: 100%;
}
66.66% {
width: 100%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
#keyframes trans3 {
0% {
width: 0%;
left: 0;
}
66.66% {
width: 0%;
left: 0;
}
100% {
width: 100%;
left: 0;
}
}
<div id="global">
<div id="top" class="mask">
<div class="plane"></div>
</div>
<div id="middle" class="mask">
<div class="plane"></div>
</div>
<div id="bottom" class="mask">
<div class="plane"></div>
</div>
</div>
https://jsfiddle.net/t3w1Lqr0/1/
When I run this code it sometimes works as expected and sometimes glitches and goes to 0deg
See the gif Below ↓
I am using it for electron.
I works most of the time in jsfiddle but rarely works in electron.
Electron v13.1.2
Chromium v91.0.4472.77
Node v14.16.0
You could create your animation purely in CSS and Utilize animation-fill-mode: forwards; to preserve the last frame of the animation.
* {
box-sizing: border-box; margin: 0; padding: 0;
}
html, body { height: 100%; }
body {
display: flex; justify-content: center; align-items: center;
background-color: #eee;
}
div, hr::before {
overflow: hidden; position: absolute;
width: 10rem; height: 5rem;
}
hr {
border-style: solid; border-width: 1.5rem;
border-color: #333; border-radius: 10rem;
width: 10rem; height: 10rem;
}
hr::before {
content: '';
transform-origin: 50% 100%; transform: translateX( -50% );
bottom: 0.25rem; left: 50%;
border-radius: 100% 100% 0.5rem 0.5rem;
width: 0.5rem; height: 4.5rem;
background-color: #ccc;
animation-name: rotate; animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards; /* Force last frame of animation to stay */
}
#keyframes rotate {
0% { transform: translateX( -50% ) rotate( -90deg ); }
100% { transform: translateX( -50% ) rotate( 90deg ); }
}
<div> <hr> </div>
And if you want to add a delay before your animation starts playing as your JavaScript does you can use the CSS property animation-delay.
I was making a CSS box design. when I'm done I saw my website keep moving up and down at below, then I saw my background color had 2 but just a little at the bottom. when I try to delete coding #keyframes animate my website was stopping moving and down. can you help me
here my coding at CSS file
.square {
position: relative;
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.square span:nth-child(1) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2) {
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3) {
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.content1 {
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning. If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you know the feeling of finding a gem that perhaps no
one else in the city knows about. Elizabeth’s nook is that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>
I hope I can get feedback very soon for my assignment
for your case, best way is to control your width and height and reduce value of them or make a box and use overflow:hidden in parent div because borders that you set absolute position for them, they are bigger from your page.
NOTE:
if you want add more content below this code or you have content above it, use overflow-x:hidden for this div, if it dosen't work, use overflow-x:hidden for your body tag.
sorry for my grammar.
body{
/*overflow-x:hidden*/
}
.square{
position: relative;
height: 400px;
width: 400px;/*if using overflow-x for body set width to 100vw or if use overflow:hidden for .square set width to 400px*/
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.square span:nth-child(1){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite ;
}
.square:hover span:nth-child(1){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(2){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
}
.square:hover span:nth-child(2){
border: none;
background: rgb(233, 112, 132);
}
.square span:nth-child(3){
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid rgb(228, 43, 73);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3){
border: none;
background: rgb(233, 112, 132);
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#keyframes animate2{
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
.content1{
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content1">
<p>“My friend, Elizabeth Shealy, owns this one room spa and I left her little oasis just this morning.
If you have ever spotted a coffee shop off the beaten track or a cafe in an unexpected area, you
know the feeling of finding a gem that perhaps no one else in the city knows about. Elizabeth’s nook is
that sort of find. Its as if you’re in another part of the world-it has a different kind of feel.”</p>
</div>
</div>
I have a div that transitions on the Y-axis by 100px. I am wanting my blue div #home-section3 to not have any top margin from .home-section2 after the transition, but ideally I do not want to have to set the margin-top to -100px for every div below the transition div. Is there a different way in which I can get the white-space gap to not appear after the transition finishes?
Here is a fiddle.
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>
add margin-bottom:-100px in class .fadeDisplay
function section2Delays() {
$('.home-section2').addClass('fadeDisplay');
};
setTimeout(section2Delays, 300);
.home-section2 {
display: inline-block;
width: 50%;
height: 300px;
vertical-align: top;
margin-top: 100px;
opacity: 0;
transition: 1s;
-webkit-transition: 1s;
background: green;
}
.home-section2.fadeDisplay {
transform: translateY(-100px);
-webkit-transform: translateY(-100px);
transition: 1s;
-webkit-transition: 1s;
opacity: 1;
margin:0 0 -100px 0 ;
}
#home-section3 {
width: 100%;
max-width: 100%;
height: auto;
background: #094765;
padding: 50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="home-section2"></div>
<section id="home-section3"></section>
You can probably use margin-top instead of transform.
.fadeDisplay {
margin-top: 0;
}
jsFiddle
In fact, the whole animation can be done with CSS only.
.home-section2 {
margin-top: 100px;
opacity: 0;
animation: ani 2s forwards;
}
#keyframes ani {
to {
margin-top: 0;
opacity: 1;
}
}
jsFiddle