I'm trying to make simple animation that
line length changing repeatedly.
and, here is my code
$(document).ready(function(){
var redline = $('.redline');
setInterval(redmove,100)
})
function redmove(){
var redline = $('.redline');
redline.animate({'width':'500px'},2000)
.animate({'width':'20px'},2000)
}
.redline{
background: red;
height: 10px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="redline"></div>
my code runs well with no problem, but, I think there must be a better code(maybe more efficient..etc)
So, here is the question
1.If this code is not good, why?
(in perspective of something like efficiency...etc)
2.I want to know better code in this situation.
thanks!
HAPPY NEW YEAR!
Look into this
#keyframes changeWidth {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
.redline {
height: 50px;
background-color:red;
animation: 4s ease-out 0s infinite changeWidth;
}
<div class="redline"></div>
You can handle it by CSS like below:
.redline {
height: 10px;
width: 20px;
background: red;
-webkit-animation-name: test_animation; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 0s; /* Safari 4.0 - 8.0 */
animation-name: test_animation;
animation-duration: 4s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes test_animation {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
/* Standard syntax */
#keyframes test_animation {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
<div class="redline"></div>
You can use a simple CSS #keyframe animation , like so:
.redline {
background: red;
height: 10px;
width: 20px;
animation-name: animateLine;
animation-duration: 2s;
animation-fill-mode: ease-in;
animation-fill-mode: both;
animation-iteration-count: infinite;
}
#keyframes animateLine {
0% {
width: 20px;
}
50% {
width: 500px;
}
100% {
width: 20px;
}
}
<div class="redline"></div>
NOTE::- you can use autoprefixer to prefix you CSS and also you can reduce your css code by using the animate shorthand.
Related
Example here:
https://codepen.io/rfehre/pen/mKryEV
CSS
.intro-side3.out {
animation-name: out;
animation-duration: 2s;
}
.intro-side3.over {
animation-name: in;
animation-duration: 2s;
}
#-webkit-keyframes out {
0%{background-position:100% 49%}
100%{background-position:0% 52%}
}
#-webkit-keyframes in {
0%{background-position:0% 52%}
100%{background-position:100% 49%}
}
Javascript
$('.intro-side3').hover(
function() {
$(this).removeClass('out').addClass('over');
},
function() {
$(this).removeClass('over').addClass('out');
}
);
I'm trying to do a gradient animation on a hover, and then to reverse that animation when you mouse off. It's not perfect, but for the most part it's working alright. Except that, if you hover for more than the currently assigned 2 seconds, the gradient reverts back to its initial state. I'm not sure why.
I'm probably missing something obvious, right?
use animation-fill-mode: forwards; property
https://codepen.io/anon/pen/BVLyvm
You can achieve the same without javascript
#import url(https://fonts.googleapis.com/css?family=Montserrat:300);
#import url(https://fonts.googleapis.com/css?family=Montserrat:800);
#import url(https://fonts.googleapis.com/css?family=Montserrat:600);
.bold-600 {
font-family: montserrat;
font-weight: 600;
}
.main {
padding-left: 0;
}
.main2 {
padding-left: 0;
padding-top: 10px;
}
.intro-side3 {
padding: 2rem;
height: 400px;
font-size: 24px;
color: white;
font-family: montserrat;
background: linear-gradient(270deg, #662d91, #00aeef, #ec008c);
background-size: 600% 600%;
animation-name: out;
animation-duration: 2s;
animation-fill-mode: forwards;
}
.intro-side3:hover {
animation-name: in;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#-webkit-keyframes out {
0% {
background-position: 100% 49%
}
100% {
background-position: 0% 52%
}
}
#-webkit-keyframes in {
0% {
background-position: 0% 52%
}
100% {
background-position: 100% 49%
}
}
<div class="main2 col-lg-3 col-md-4">
<h1 style="font-family:montserrat; font-size:24px; padding:20px;">Hover /w Reverse</h2>
<div class="intro-side3 gradientbg">
<div class="inner">
<p>We are here to <span class="bold-600"> do things</span> and <span class="bold-600">also maybe some stuff.</span>
</div>
</div>
</div>
try adding the following property to the CSS
animation-iteration-count: 1;
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 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%;
}
I was wondering if it is possible to assign a group of stacking texts in the middle of the page? placing them in the center wasn't too difficult, but the problem was that they are positioned left, right, top, and bottom, which I think means they need to be given: position:absolute. Furthermore, the .headline texts are given fade-in(opacity 0 to 100) and animation commands. In terms of scaling, the texts are responsive, and get smaller as the window gets smaller. In addition they are assigned their own z-index.
In the image below, I have laid out the overall structure I would like to achieve, but I'm experiencing a lot of difficulty doing so because of the text behaviors I want to accomplish.
For functionality reference, here is a jsfiddle.
Please help me and thank you in advance! Please note that I would prefer to use CSS only since it's a simple function that only occurs once upon page load. However, if this is a issue that only javascript can solve, please let me know :)
.animated {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
-ms-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.fade {
-webkit-animation-name: fade;
-moz-animation-name: fade;
-o-animation-name: fade;
animation-name: fade;
}
#-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#keyframes flowright {
0% {
opacity: 0;
left: -100px;
}
100% {
opacity: 1;
left: 0;
}
}
#-webkit-keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#keyframes flowleft {
0% {
opacity: 0;
right: -100px;
}
100% {
opacity: 1;
right: 0;
}
}
#-webkit-keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowup {
0% {
opacity: 0;
margin-top: 100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#-webkit-keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
#keyframes flowdown {
0% {
opacity: 0;
margin-top: -100px;
}
100% {
opacity: 1;
margin-top: 0;
}
}
.flow {
display: inline-block;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: both;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.right {
-webkit-animation-name: flowright;
animation-name: flowright;
}
.left {
-webkit-animation-name: flowleft;
animation-name: flowleft;
}
.up {
-webkit-animation-name: flowup;
animation-name: flowup;
}
.down {
-webkit-animation-name: flowdown;
animation-name: flowdown;
}
.sequence01 {
-webkit-animation-delay: 0.1s;
}
.sequence02 {
-webkit-animation-delay: 0.2s;
}
.sequence03 {
-webkit-animation-delay: 0.3s;
}
.sequence04 {
-webkit-animation-delay: 0.4s;
}
/* Headline Typography */
.headline {
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
/* Rows */
.row01, .row02, .row03 {
clear: both;
}
.row01 {
left:20%;
top: 0;
position: relative;
}
.row02 {
right:10%;
top: 50%;
position: relative;
}
.row03 {
left:10%;
top: 100%;
position: relative;
}
/* General Structure */
body {
width: 100%;
height: 100%;
}
.pagewrap {
height: 100%;
width: 80%;
max-width: 48em;
margin: 0 auto;
background-color: #fff6d6;
}
<body>
<div class="pagewrap">
<div class="headline">
<div class="row01 flow left sequence01">ROW 01</div>
<br/>
<div class="row02 flow right sequence02">ROW 02</div>
<br/>
<div class="row03 flow up sequence03">ROW 03</div>
</div>
</div>
</body>
The solution given by adeneo in the comments may work perfectly fine, but since your layout is strictly vertical, why not just use a block layout instead of inline-block or floats?
fiddle here.
You mention a "padding" percentage between the rows as well. Note that margin and padding css attributes as percentages will key off of the width not the height. I placed divs to solve that, but there are other solutions.
Edit
If the headline needs to be vertically centered to the page, here's a nifty way to do it using the "ghost element technique":
/* Headline Typography */
.wrapper {
position: relative;
height: 100%;
width: 100%;
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.wrapper:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.headline {
display: inline-block;
width: 100%;
vertical-align: middle;
font-family: helvetica;
font-weight: bold;
font-size: 4em;
}
fiddle
I learned of it here.
Let's say we have an animation like here: http://jsfiddle.net/utterstep/JPDwC/
Layout:
<div>back</div>
<div class="animating"></div>
<div>forward</div>
And corresponding CSS:
#keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
animation: someanimation 5s infinite;
}
And I want to go to the next or previous animation state when I press back or forward. There can be more than one object and I would like to switch their animation states at the same time.
Is it someway possible via CSS or CSS+JS, or it maybe it will be easier for me just to rewrite my code in pure-JS? (currently I don't like this idea because I have a lot of properties to animate and CSS makes it much more easier for me)
Perhaps you have got the answer in CSS+JS
Please refer Old Post
Here on fiddle from the same post Fiddle
And with CSS only here is the Fiddle I have tweaked with :hover property,
#-webkit-keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#-moz-keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#keyframes someanimation {
0% {
width: 100px;
}
50% {
width: 200px;
}
100% {
width: 100px;
}
}
#-webkit-keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
#-moz-keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
#keyframes someani2 {
0%,100% {
width: 100px;
}
50% {
width: 200px;
}
}
.animating {
width: 200px;
height: 200px;
background-color: red;
-webkit-animation: someanimation 5s infinite;
-moz-animation: someanimation 5s infinite;
animation: someanimation 5s infinite;
}
.animating:hover{
color:#f60;
-webkit-animation: someani2 6s 1;
-moz-animation: someani2 6s 1;
animation: someani2 6s 1;
}
<div>back</div>
<div class="animating"></div>
<div>forward</div>
it changes the animation on hover, just like back button.
I hope this will solve your purpose..