I am trying to accomplish the effect from this answer but without the text: Expand bottom border on hover
And know this can be accomplished by growing the entire div from the center as with here: http://jsfiddle.net/wNXLY/ but have no idea how to create this effect with line (i.e keeping the height static)
I have created my line here:
.line {
background: white;
width: 300px;
top: 10%;
height: 3.2px;
margin:auto;
position: relative;
}
And need to have the line grow from the center on page load. How can I do this?
You can use css animation with animation-fill-mode set to forwards, setting #keyframes width from 0% to n%, left from 50% to 5%
body {
width:100%;
}
div {
display:block;
position:absolute;
top:45%;
left:50%;
border-bottom:4px solid red;
width:0%;
text-align:center;
animation: line 2s linear forwards;
}
#keyframes line {
from {
left:50%;
width:0%;
}
to {
left:5%;
width:90%;
}
}
<div></div>
#keyframes line_animation {
from {
width: 0%;
}
to {
width:100%;
}
}
.line {
border-bottom: solid 3px #019fb6;
border-top-width: 0px;
animation-name: line_animation;
animation-duration: 4s;
animation-timing-function: linear;
}
Like this
<hr class="line" />
i have utilised display grid and SCSS to configure an authentic border animation
.top-border {
grid-area: tb;
// background: green;
border-bottom: $border-config;
width: 0%;
animation: horizontal-border-animation $animation-duration / 2 forwards;
animation-delay: $animation-delay;
}
.bottom-border {
grid-area: bb;
//to prevent being visible since it is going to be delayed
width: 0%;
// background: yellow;
border-top: $border-config;
animation: horizontal-border-animation $animation-duration / 2 forwards;
// because both right and bottom will start animating after top and left + the intitial delay
animation-delay: $animation-duration / 2 + $animation-delay;
}
#keyframes expand-border-width {
from {
width:0%;
}
to {
width:100%;
}
}
check my sample to gain an explicit clarification
https://codepen.io/ino0r/pen/eYEgvrZ
You don't need keyframes for this if you're just transitioning the effect.
<div class="line"></div>
.line {
width: 0%;
height: 1px;
position: absolute;
left: 50%;
background: #f00;
transition: all 1s;
}
.line:hover {
width: 100%;
left: 0%;
}
Related
I want to create animated progress as below, but the thing is it is not working properly on safari browser
The css property which I used is:
.prgoressBar {
width: 100%;
margin: 0 auto;
height: 22px;
background-color:#BBBBBB;
overflow: hidden;
}
.prgoressBar div {
height: 100%;
text-align: right;
padding: 0;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 100%;
background-color: #185A8D;
box-sizing: border-box;
color:#fff;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
transition: width 1s linear;
}
<div id="QM_progressBar" class="prgoressBar">
</div>
Try using the 'transform: scaleX()' instead of changing the width. Transform uses to run better with transition, maybe that's why Safari is freaking out.
I don't have Safari installed right now, so please check if this codepen works: https://codepen.io/thiagoberrutti/pen/GRmLzZK.
In the codepen I used transition but in this snippet I tried with animations instead, see if one of them can work on Safari:
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear forwards;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
.progress-container{
width:500px;
height:22px;
border:5px solid #ccc;
}
.progress{
width:100%;
transform-origin:left;
height:100%;
background-color:#185A8D;
animation: timer var(--time) linear;
}
#keyframes timer{
0%{
transform:scaleX(1)
}
100%{
transform: scaleX(0);
}
}
<div class="progress-container">
<div class="progress" style="--time:5s"></div>
</div>
I am creating a box which animates, and moves and when i hover on it, it increases the size of the box. But when I hover on the box on the Edge of the display the increasing size of the box so it goes outside of visible display, but i want it to be inside of the visible display. CSS or JS both can work. My code is below.
body{
overflow-x: hidden;
}
#box1{
width: 5cm;
height: 4cm;
position: relative;
background-color: green;
animation-name: anim;
animation-duration: 10s;
animation-iteration-count: infinite;
transition: all 1s ease-in-out;
}
#keyframes anim{
0%{
top: 0px;
left: 0px; }
40%{
top: 300px;
left: 500px; }
75%{
top: 500px;
left: 10px; }
100%{
top: 0;
left: 0; }
}
#box1:hover{
animation-play-state: paused;
height: 300px; /* you can change it acc to you */
width:300px; /* you can change it acc to you */
}
}
jsbin link is here for website
I have a bunch of these 90x900 images that drop down on page load. The animation for that is just added in the parent element selecting all li's in the list, which are the images. The images initial position is -1000px, and have a css animation to transform from 0px to 1000px on the Y Axis, and they stay there with
animation-fill-mode: forwards.
I want it so when I click a button they return to their initial position of -1000px.
These are my animations, first one is the initial page load animation, second one is what I want to trigger on click.
#keyframes mainpic {
from {transform: translateY(0px);}
to {transform: translateY(1000px);}
}
#keyframes mainpicleave {
from {transform: translateY(1000px);}
to {transform: translateY(0px);}
}
So I added the page load animation to .main-pic li so it adds it to every li in the ul. And then I set an animation-delay of 0.2s more than the last one on every li.
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
top: -1000px;
box-shadow: 3px 0px 10px black;
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url('../images/dropdown-main/main-pic-01.png');
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url('../images/dropdown-main/main-pic-02.png');
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
So I thought I could just add another class with an animation on it with jQuery. I made this class:
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: forwards;
}
So I tried a couple different things with jQuery. I thought maybe if I removed the pre exisiting class with the initial animation on it, and then had a toggleClass on it, that it would work. But it does not.
$('#btn_01').click(function(){
$('.main-pic-01').toggleClass('main-pic li');
$('.main-pic-01').toggleClass('main-pic-toggle-leave');
});
Not sure what else I can do. Any ideas?
Define a separate class for animation properties for .main-pic li elements at css; animate top instead of transform; set animation-fill-mode to both at .main-pic-toggle-leave
$('#btn_01').click(function() {
$(".main-pic-01").toggleClass('animation');
$(".main-pic-01").toggleClass('main-pic-toggle-leave');
});
.main-pic li {
float: left;
margin-left: 7px;
z-index: -1;
position: relative;
box-shadow: 3px 0px 10px black;
top: -1000px;
}
.animation {
animation-name: mainpic;
animation-fill-mode: forwards;
animation-duration: 3s;
}
.main-pic-01 {
background-image: url("http://lorempixel.com/900/90/nature");
background-repeat: no-repeat;
height: 900px;
width: 90px;
animation-delay: 0.2s;
}
.main-pic-02 {
background-image: url();
height: 900px;
width: 90px;
animation-delay: 0.4s;
}
.main-pic-toggle-leave {
animation-name: mainpicleave;
animation-duration: 2s;
animation-fill-mode: both;
}
#keyframes mainpic {
from {
top: -1000px;
}
to {
top: 0px;
}
}
#keyframes mainpicleave {
from {
top: 0px;
}
to {
top: -1000px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_01">click</button>
<ul class="main-pic">
<li class="main-pic-01 animation"></li>
<ul>
instead of animation, you can use transition. Then you can toggle some class on click and specify the 'after transition' state in this class
$("#trigger").on("click", function(e){
e.preventDefault();
$("#block").toggleClass("moved");
});//#button click
$(window).on("load", function(){
$("#trigger").trigger("click");
});//window load
#block
{
height: 100px;
width: 100px;
background: orange;
transition: transform 0.8s ease;
transform: translateX(0px);
}
#block.moved
{
transform: translateX(300px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="block"></div>
<button id="trigger">Move</button>
I have two divs which has one circle along with one smily where innercircle1 div is rotating with given animation.
What i want is when i hover on innercircle1 div it should stop but with their current transform origin position,
Currently when i hover over innercircle1 div it goes to their starting point i.e. their given transform origin and stop.
body {
background: #000;
color: #fff;
}
#keyframes circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes inner-circle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.outercircle {
border: 1px solid red;
border-radius: 50%;
width: 310px;
margin: 64px auto;
height: 310px;
position: Relative;
}
.innercircle {
width: 100px;
height: 100px;
margin: 20px auto 0;
color: orange;
font-size: 100px;
line-height: 1;
animation: circle 5s linear infinite;
transform-origin: 50% 200px;
position: ABSOLUTE;
top: -70px;
left: 109px;
}
.innercircle1 {
animation: inner-circle 5s linear infinite;
}
<div class="outercircle"><div class="innercircle"><div class="innercircle1">☻</div></div></div>
You can pause animation using JQUERY as well as CSS.
A very simple solution to use animation-play-state property.
Try these lines:
.innercircle1 {
animation: inner-circle 5s linear infinite;
animation-play-state: play;
}
.innercircle1:hover{
animation-play-state: paused;
}
Saw this cool 3x3 grid on this site and cant seem to re-create the animation it has.
The image folds a bit on hover and folds completely in half on a click.
Reference: http://doyouimpress.com/
I've tried doing something similar in CSS however the :active psuedo selector won't open the page completely unless you hold click. Would I only be able to re-create this animation w jquery?
Here's what I've done so far (webkit only): http://jsfiddle.net/JDH9/4wrnf/8/
HTML
<div id="container">
<div id="test">
<div id="left"></div>
<div id="center"></div>
</div>
CSS
#container {
position: absolute;
top: 50%;
left: 50%;
margin: -200px 0 0 -100px;
-webkit-perspective: 1000;
}
#test {
position: relative;
}
#test div {
width: 200px;
height: 400px;
}
#left {
background: grey;
z-index: 3;
-webkit-transform-origin: 0% 50%;
-webkit-transition-delay: 1s;
}
#center {
background: grey;
z-index: 1;
}
#left {
position: absolute;
top: 0;
left: 0;
-webkit-transition-duration: 2s;
}
#test:hover #left {
-webkit-transform: rotateY(-45deg);
-webkit-transition-delay: 0s;
}
#test:active #left {
-webkit-transform: rotateY(-180deg);
-webkit-transition-delay: 0s;
}