I have my markup and css like this
<div class="box">Box Content</div>
css goes like this
<style>
#-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
#-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
and the jQuery like this
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.
It's not working because you didn't specify how long the animation should take to complete. Try this:
.widthanimation::after {
-webkit-animation: widthresize 1s ease;
-moz-animation: widthresize 1s ease;
-o-animation: widthresize 1s ease;
-ms-animation: widthresize 1s ease;
animation: widthresize 1s ease;
}
Updated fiddle
Note that 1s is 1 second. You can adjust this as you require.
To stop the animation at the 100% keyframe, use animation-fill-mode: forwards:
Example fiddle
CSS animation seems a bit overkill, could you not just transition?
https://jsfiddle.net/9qc2yg59/
.box::after {
background: #FFF;
content: '';
position: absolute;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
-webkit-transition: width 1s ease-out;
transition: width 1s ease-out;
}
.box.widthanimation::after {
width:100%;
}
Related
I want to add text to the images that are fading in and fading out. And I want the text to fade in and out with the concerned image. Any Idea how can this be done? Thanks in advance! I have given the code below:
<html>
<div id="fadeslide">
<img src="9.jpg" class="is-showing"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
</div>
</html>
<script>
function slideShow() {
var showing = $('#fadeslide .is-showing');
var next = showing.next().length ? showing.next():
showing.parent().children(':first');
showing.fadeOut(1000, function() {
next.fadeIn(1000).addClass('is-showing');
}).removeClass('is-showing');
setTimeout(slideShow, 5500);
}
$(document).ready(function() {
slideShow();
});
</script>
#fadeslide {
width: 960px;
height: 640px;
margin: 0px auto 0px auto;
overflow: hidden;
}
#fadeslide img {
display: none;
}
#fadeslide .is-showing {
display: inline;
}
Try this:-
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-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;
}
#cf img.top:hover {
opacity:0;
}
<div id="cf">
<img class="bottom" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" />
<img class="top" src="https://wallpapers.pub/web/wallpapers/birds-water-spray-wallpaper/3840x2160.jpg" />
</div>
Ok try it
body, html {
text-align: center;
font-size: 90px;
font-family: Poiret One;
height: 100%;
background: -webkit-linear-gradient(315deg, #723362, #9d223c);
background: linear-gradient(135deg, #723362, #9d223c);
overflow: hidden;
color: white;
}
.letter {
position: relative;
top: -webkit-calc(50% - 60px);
top: calc(50% - 60px);
text-shadow: 0px 0px 3px white;
}
.letter:nth-child(1) {
-webkit-animation: fade 4s infinite 200ms;
animation: fade 4s infinite 200ms;
}
.letter:nth-child(2) {
-webkit-animation: fade 4s infinite 400ms;
animation: fade 4s infinite 400ms;
}
.letter:nth-child(3) {
-webkit-animation: fade 4s infinite 600ms;
animation: fade 4s infinite 600ms;
}
.letter:nth-child(4) {
-webkit-animation: fade 4s infinite 800ms;
animation: fade 4s infinite 800ms;
}
.letter:nth-child(5) {
-webkit-animation: fade 4s infinite 1000ms;
animation: fade 4s infinite 1000ms;
}
.letter:nth-child(6) {
-webkit-animation: fade 4s infinite 1200ms;
animation: fade 4s infinite 1200ms;
}
.letter:nth-child(7) {
-webkit-animation: fade 4s infinite 1400ms;
animation: fade 4s infinite 1400ms;
}
#-webkit-keyframes fade {
50% {
opacity: 0.02;
}
}
#keyframes fade {
50% {
opacity: 0.02;
}
}
<span class='letter'>L</span>
<span class='letter'>O</span>
<span class='letter'>A</span>
<span class='letter'>D</span>
<span class='letter'>I</span>
<span class='letter'>N</span>
<span class='letter'>G</span>
or this
.fadebutton {
text-align:center;
padding:20px 20px;
background:#fff;
line-height:60px;
transition: opacity 0.5s;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
-o-transition: all ease 0.5s;
-ms-transition: all ease 0.5s ;
transition: all ease 0.5s ;
border:1px solid #ff3000;
border-radius:5px;
}
.fadebutton:hover {
background-image:url("http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
color:#fff;
-webkit-transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
-o-transition: all ease 0.7s;
-ms-transition: all ease 0.7s ;
transition: all ease 0.5s ;
}
<div class="fadebutton">HOVER YOUR MOUSE CURSOR HERE!</div>
In the following example the goal is to control the element position with smooth slideIn/Out animation. The problem is when the new class is added it overwrites the first one and the second part of animation begins with the reset of element position to 0 and then slidesIn again.
The following snippet will show better what I've tried to explain.
$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>
If you remove the animation-delay attribute you have in the .show css that should prevent the visible 0.2s reset, as below
$('.trigger').click(function() {
var target = $('.target');
if (!target.hasClass('hide')) {
target.removeClass('show');
target.addClass('hide');
} else {
target.removeClass('hide');
target.addClass('show');
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0vw);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>
$('.trigger').click(function() {
if (!$('.target').hasClass('hide')) {
$('.target').addClass('hide')
} else {
$('.target').css({"transform":"translate(120vw)"});
$('.target').addClass('show')
}
})
.target {
height: 50px;
width: 50px;
background-color: blue;
margin: 0 auto;
}
.trigger {
margin: 0 auto;
display: block;
}
#keyframes hide{
0% { transform: translate(0);}
20% { transform: translate(5px);}
100% { transform: translate(-120vw);}
}
#keyframes show {
0% { transform: translate(-120vw);}
80% { transform: translate(-5px);}
100% { transform: translate(0);}
}
.hide {
animation: hide 0.5s forwards ease-in-out;
animation-delay: .2s;
}
.show {
animation: show 0.5s forwards ease-in-out;
animation-delay: .2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class='target'> </div>
<button class='trigger'>Trigger</button>
I currently have 5 frames - each frame consist of a total of 3 animations that by time gradually fade up the next frame.
My issue: How can I loop the animation after having finished the last sequence of animation? (in the example that would be #frame2)
I don't mind using javascript to possibly detect and "force" the loop.
Fiddle here: http://jsfiddle.net/a0cpo5xe/1/ - My setup looks as so (just imagine it with 5 frames):
#frame1 {
animation:kf_frame_fade_up 0.4s;
animation-fill-mode: forwards;
animation-delay:0.8s;
}
#picture-1 .blink {
animation:kf_frame_fade_down 0.2s;
animation-fill-mode: forwards;
animation-delay:0.5s;
}
#picture-1 .picture {
animation:kf_frame_fade_up 0.2s;
animation-fill-mode: forwards;
animation-delay:0.5s;
}
#frame2 {
animation:kf_frame_fade_up 0.4s;
animation-fill-mode: forwards;
animation-delay:4.3s;
}
#picture-2 .blink {
animation:kf_frame_fade_down 0.2s;
animation-fill-mode: forwards;
animation-delay:4s;
}
#picture-2 .picture {
animation:kf_frame_fade_up 0.2s;
animation-fill-mode: forwards;
animation-delay:4s;
}
/* FADES */
#keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}
You can listen for the animationend event using JavaScript to determine if the animation ended.
animationend
The animationend event is fired when a CSS animation has completed.
Here is an example repeating your css animation from your jsfiddle three times by cloning your elements, removing them and at the end of the animation adding them back to the DOM.
I'm sure you will get the idea.
var i = 1;
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement"),
animations = {
"animation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
};
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
function init() {
var animationEvent = whichAnimationEvent(),
wrp = document.getElementById('wrapper'),
frm2 = document.getElementById('frame2'),
cln = wrp.cloneNode(true);
function animationEnd(evt) {
i++;
//console.log(evt);
wrp.parentNode.removeChild(wrp);
document.body.appendChild(cln);
if (i !== 3) {
init();
}
}
frm2.addEventListener(animationEvent, animationEnd);
}
init();
#wrapper {
text-align: center;
color: #ffffff;
}
#frames {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border: 1px solid #000000;
}
.frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* hide */
}
#pictures {
position: absolute;
top: 0;
}
.picture {
position: absolute;
top: 100px;
left: 100px;
padding: 10px;
opacity: 0; /* hide */
}
/* ANIMATION START */
#frame1 {
background-color: green;
-webkit-animation:kf_frame_fade_up 0.4s;
animation:kf_frame_fade_up 0.4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:0.8s;
animation-delay:0.8s;
}
#picture-1 .picture {
background-color: #116343;
-webkit-animation:kf_frame_fade_up 0.2s;
animation:kf_frame_fade_up 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:0.5s;
animation-delay:0.5s;
}
#frame2 {
background-color: blue;
-webkit-animation:kf_frame_fade_up 0.4s;
animation:kf_frame_fade_up 0.4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:4s;
animation-delay:4s;
}
#picture-2 .picture {
background-color: #3d1163;
-webkit-animation:kf_frame_fade_up 0.2s;
animation:kf_frame_fade_up 0.2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay:3.7s;
animation-delay:3.7s;
}
/* FADES */
#-webkit-keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes kf_frame_fade_up {
0% {opacity: 0;}
100% {opacity: 1;}
}
#-webkit-keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes kf_frame_fade_down {
0% {opacity: 1;}
100% {opacity: 0;}
}
<div id="wrapper">
<div id="frames">
<div id="frame1" class="frame">frame 1</div>
<div id="frame2" class="frame">frame 2</div>
</div>
<div id="pictures">
<div id="picture-1">
<div class="picture">pic 1</div>
</div>
<div id="picture-2">
<div class="picture">pic 2</div>
</div>
</div>
</div>
I am trying to move two wheel images towards each other using the following code:
HTML:
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</body>
CSS:
body{
background:#fff;
}
body > img{
width:200px;
}
.leftwheel {
float:left;
-webkit-animation: rotationLeft 2s infinite linear;
animation: rotationLeft 2s infinite linear;
-moz-animation: rotationLeft 2s infinite linear;
}
#-webkit-keyframes rotationLeft {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);margin-left:25%;}
}
#-moz-keyframes rotationLeft {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(359deg);margin-left:25%;}
}
#keyframes rotationLeft {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);margin-left:25%;}
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
animation: rotationRight 2s infinite linear;
-moz-animation: rotationRight 2s infinite linear;
}
#-webkit-keyframes rotationRight {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(-359deg);margin-right:25%;}
}
#-moz-keyframes rotationRight {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(-359deg);margin-right:25%;}
}
#keyframes rotationRight {
from {transform: rotate(0deg);}
to {transform: rotate(-359deg);margin-right:25%;}
}
DEMO
Now the problem is, I want both the wheels to move towards each other, meet(collide) at the center and the movement should stop while the rotation still continues. But I have set the animation repeat as infinite since i want infinite rotation of the wheel. Can I achieve what I want just by using CSS? If not what are the javascript alternatives? Also how can I set one animation to repeat and other to happen only once in CSS?
Try wrapping your images in divs, and applying your second animation to the wrapping divs. Include forwards (for animation-fill-mode) in your animation shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) to make the element holds its final position (rather than resetting to its initial position).
Update:
Based on your comment below that the wheels should collide, I would nix the floats and positioning by margin, and would instead position by absolute. Note that (if I understand what you want), the to positions would probably need to be stated by calc(), which is newer technology but mostly supported (http://caniuse.com/#search=calc). Also, your image file includes padding, which you might want to crop in an image editor, or you could reverse in your CSS.
WORKING DEMO (refresh page to repeat animation): http://jsbin.com/jifup/4
CSS:
#-webkit-keyframes translationLeft {
from { left: 0%; }
to { left: calc(50% - 170px); }
}
#-webkit-keyframes translationRight {
from { right: 0%; }
to { right: calc(50% - 170px); }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
position: absolute;
margin: -18px;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
position: absolute;
margin: -18px;
}
.leftwheel {
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
-webkit-animation: rotationRight 2s infinite linear;
}
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
PREVIOUS ANSWER CODE:
WORKING DEMO (refresh page to see animation again and again): http://jsbin.com/jifup/1
HTML:
<body>
<div class="translateLeft">
<img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
<div class="translateRight">
<img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
</div>
</body>
CSS:
#-webkit-keyframes translationLeft {
from { margin-left: 0; }
to { margin-left: 25%; }
}
#-webkit-keyframes translationRight {
from { margin-right: 0; }
to { margin-right: 25%; }
}
#-webkit-keyframes rotationLeft {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
#-webkit-keyframes rotationRight {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(-359deg); }
}
body {
background: #fff;
}
img {
width: 200px;
}
.translateLeft {
-webkit-animation: translationLeft 2s linear forwards;
}
.translateRight {
-webkit-animation: translationRight 2s linear forwards;
}
.leftwheel {
float: left;
-webkit-animation: rotationLeft 2s infinite linear;
}
.rightwheel {
float:right;
-webkit-animation: rotationRight 2s infinite linear;
}
http://www.samnorris.co.nz
In the About section under 'Proficiencies' I have a "Skills Progression Bar" list made with CSS, which is supposed to animate using keyframes - but the animation cannot be seen on my page presumably because it is running as soon as the page loads.
Is there any way to delay or trigger the keyframe animations only when the 'Proficiencies' heading/slide is clicked, or alternatively only when the container with the skills bar is visible in the viewport?
I am aware of the various techniques to only run an animation when the page is scrolled to a certain point, but in this instance obviously that's not quite what I want...
Relevant code (for Krish):
CSS
.about-skills {
width:398px;
margin:0;
position:relative;
float:left;
font-size:12px;
line-height:2em;
padding:30px 0 30px;
margin-left: 15px;
}
.skills-col { width:400px; }
.skills-list {
display: none;
list-style:none;
padding-top:20px;
}
.skills-list li {
margin-bottom:50px;
background:#ececec;
height:5px;
border-radius:3px;
border-left:1px solid #cecece;
border-top:1px solid #cecece;
border-right:1px solid #cecece;
border-bottom:1px solid #b5b5b5;
}
.skills-list li em {
position:relative;
top:-30px;
}
.skills-expand {
height:1px;
margin:2px 0;
background:#0dc9ff;
position:absolute;
box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
}
.html5 { display: block; width:85%; -moz-animation:html5 2s ease-out; -webkit-animation:html5 2s ease-out; }
.css3 { display: block; width:70%; -moz-animation:css3 2s ease-out; -webkit-animation:css3 2s ease-out; }
.jquery { display: block; width:50%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; }
.php { display: block; width:20%; -moz-animation:php 2s ease-out; -webkit-animation:php 2s ease-out; }
.dreamweaver { display: block; width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
.photoshop { display: block; width:100%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out; }
.responsive { display: block; width:40%; -moz-animation:responsive 2s ease-out; -webkit-animation:responsive 2s ease-out; }
#-moz-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} }
#-moz-keyframes css3 { 0% { width:0px;} 100%{ width:70%;} }
#-moz-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
#-moz-keyframes php { 0% { width:0px;} 100%{ width:20%;} }
#-moz-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} }
#-moz-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }
#-moz-keyframes responsive { 0% { width:0px;} 100%{ width:40%;} }
#-webkit-keyframes html5 { 0% { width:0px;} 100%{ width:85%;} }
#-webkit-keyframes css3 { 0% { width:0px;} 100%{ width:70%;} }
#-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:50%;} }
#-webkit-keyframes php { 0% { width:0px;} 100%{ width:20%;} }
#-webkit-keyframes photoshop { 0% { width:0px;} 100%{ width:100%;} }
#-webkit-keyframes dreamweaver { 0% { width:0px;} 100%{ width:100%;} }
#-webkit-keyframes responsive { 0% { width:0px;} 100%{ width:40%;} }
jQuery
$('a.proficiencies').click(function(){
$('.skills-list').toggleClass('html5');
});
after look at your code it will work good with the jquery addClass on the click of a link
HTML Structure
<a class="proficiencies">Proficiencies(click)</a>
<ul>
<li><em>HTML5</em><span class="skills-expand html5anim"></span></li>
<li><em>CSS3</em><span class="skills-expand css3anim"></span></li>
</ul>
jQuery
$('a.proficiencies').click(function(){
$('.html5anim').addClass('html5');
$('.css3anim').addClass('css3');
});
Live Demo : http://codepen.io/krish4u/pen/fyehA