I have this animation, which I have set up like this:
$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;
.text--line {
font-size: .5em;
color: transparent;
}
svg {
position: absolute;
width: 100%;
height: 100%;
background: hsl(200,70,11);
background-size: .12em 100%;
font: 16em/1 Arial;
z-index: 20000;
}
.text-last {
fill: white;
stroke: white;
opacity:0;
animation: fadeIn ease-in 1;
animation-duration:1s;
animation-delay:3s;
}
$max: 5;
$stroke-step: 7%;
.text-copy {
fill: none;
stroke: white;
stroke-dasharray: $stroke-step $stroke-step * ($max - 1);
stroke-width: 1px;
animation: stroke-offset 3s 1 linear;
#for $item from 1 through $max {
$stroke-color: nth($colors, $item);
&:nth-child(#{$item}) {
stroke: $stroke-color;
stroke-dashoffset: $stroke-step * $item;
}
}
}
#keyframes stroke-offset {
0% {
stroke-dashoffset: $stroke-step * $max;
stroke-dasharray: 0 $stroke-step * $max*2.5;
}
}
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
The effects are great, but when my text-last gets the the end of the animation, it resets the opacity back to 0.
Does anyone know how I can stop this from happening?
Here is a codepen:
http://codepen.io/r3plica/pen/amQrZZ
You can use animation-fill-mode: forwards; to maintain the final state of a CSS animation.
Simply add it to .text-last with the other animation properties.
See the full fill-mode documentation here
Related
I want it to repeat the animation from where the hover has been 'released. So this is what my code looks like:
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
This is the HTML I have got.
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
-webkit-animation: show0 2s;
animation-name: show0;
animation-duration: 2s;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#-webkit-keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
#keyframes show0 {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 534;
}
}
I am not sure if 'release' is the right word but I can't think of anything better right now.
So if you hover it, that animation will be reversed. But what I want to accomplish is that when you release the hover at 50%, the animation will play from 50% and when you release the hover at 20% that the animation will play from 20%. I haven't got really, I got stuck after the hover-reverse.
this is a live example of my working code:
https://jsfiddle.net/172dLc93/
Thanks
Use animation for the initial setup, but then use transitions so that it continues from where it left.
#import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
font-family: 'Lato';
}
.container {
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.chart {
position: relative;
display: inline-block;
color: #999;
font-size: 20px;
text-align: center;
}
.chart figcaption {
padding: 50px 25px;
width: 100px;
height: 50px;
border: 20px solid #f0f0f0;
border-radius: 100px;
line-height: 50px;
}
.chart svg {
position: absolute;
top: 0;
left: 0;
}
.outer {
fill: transparent;
stroke: #333;
stroke-width: 10;
stroke-dasharray: 534;
transition:stroke-dashoffset 2s;
/* firefox bug fix - won't rotate at 90deg angles */
-moz-transform: rotate(-89deg) translateX(-190px);
}
.chart[data-percent='100'] {
stroke-dashoffset: 0
-webkit-animation: show100 2s;
animation-name: show100;
animation-duration: 2s;
}
.chart:hover .outer {
stroke-dashoffset: 534;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show100 {
from {
stroke-dashoffset: 534;
}
to {
stroke-dashoffset: 0;
}
}
<section class="container">
<figure class="chart" data-percent="100">
<figcaption>HTML</figcaption>
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
</section>
Updated fiddle: https://jsfiddle.net/gaby/172dLc93/4/
I am trying to get the typing animation effect to continue one line at a time when the size of parent container forces the text to span multiple lines.
/* The typing effect */
#keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: green;
}
}
.animated-text {
font: bold 1.45em monospace;
color: black;
border-right: 0.6em solid;
overflow: hidden; /* Ensures the content is not revealed until the animation */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
animation: typing 3.5s steps(40, end), blink-caret 0.9s step-end infinite;
}
.container {
border: 10px solid;
position: absolute;
width: 25%;
height: 32%;
left: 35%
}
<div class='container'>
<h1 class='animated-text'>The typing effect should continue line by line at a time when the text needs to wrap</h1>
</div>
I've been searching for the answer to this question as well.
The closest I could find was this - multiline typewriter effect. However, you have to manually set the width of each p tag. I've yet to find a way to dynamically set the width of each line.
All lines except for the last line uses border-right to display the typewriter effect, only the last line has blink animation which is the typewriter cursor.
<div class="css-typing">
<p>
Hi I'm Jenssen Lee! Looking to start my career as a Front-End Developer in Singapore.
</p>
<p>
I have experience with HTML, SASS, Bootstrap, JavaScript, jQuery, React, Node.js, Express.
</p>
<p>
This site was designed and built by me - the code is available on Github.
</p>
</div>
.css-typing p {
border-right: .15em solid orange;
font-family: "Courier";
font-size: 14px;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 780px; /* manually set width */
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 780px; /* manually set width */
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
width: 620px; /* manually set width */
opacity: 0;
-webkit-animation: type3 5s steps(20, end), blink .5s step-end infinite alternate;
animation: type3 2s steps(20, end), blink .5s step-end infinite alternate;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
#-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes blink {
50% {
border-color: transparent;
}
}
#-webkit-keyframes blink {
50% {
border-color: tranparent;
}
}
I have an ul. With javascript I add the li's to it. I need the added li with background-color #E4F3D6 then 10 seconds later change to #DDD as final color.
I know this is possible with animation and transition-delay but I don't figure out how.
I wrote this but doesn't work properly:
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-webkit-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
/*-moz-transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
/*transition-delay: 5s;*/
}
100% { background-color: transparent; }
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease;
-moz-animation: change-color 2s ease;
animation: change-color 2s ease;
}
Here a demo: https://jsfiddle.net/junihh/a657pd6q/4/
Anyone help me, please.
Set the transition-delay property in the CSS for the element itself:
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
The above uses the shorthand alternative for the animation property:
animation: <animation-name> <animation-duration> <animation-type> <animation-duration> <animation-fill-mode>
The animation-delay property does precisely what its name suggests, it delays the start of the animation by the value specified (here 5s, five seconds); the animation-fill-mode property causes the final values of the animation to persist once the animation has completed:
document.getElementById('add').addEventListener('click', function() {
var li = document.createElement('li');
li.innerHTML = '<div class="test"></div>';
document.getElementById('container').appendChild(li);
}, false);
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
#container {
width: 200px;
margin: 20px auto 0;
padding: 15px;
background-color: #FFF;
border: solid 1px #DDD;
}
#container li {
background-color: #DDD;
margin-bottom: 4px;
}
#container li:last-child {
margin-bottom: 0;
}
.button-box {
margin: 20px auto 0;
width: 100px;
}
#add {
width: 100%;
padding: 10px 0;
background-color: #666;
cursor: pointer;
font-size: 14px;
color: #FFF;
}
#add:active {
background-color: #333;
}
#-webkit-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#-moz-keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
#keyframes change-color {
0% {
background-color: #E4F3D6;
}
100% {
background-color: #F90;
}
}
.test {
height: 25px;
background-color: #E4F3D6;
-webkit-animation: change-color 2s ease 5s forwards;
-moz-animation: change-color 2s ease 5s forwards;
animation: change-color 2s ease 5s forwards;
}
<ul id="container">
<!-- li's -->
</ul>
<div class="button-box">
<button type="button" id="add">Add row</button>
</div>
JS Fiddle demo.
Note that, in the demo, I've used a final colour of #f90 instead of #ddd simply to make the animation more obvious (the difference between the start and end colours, otherwise, are easy to miss).
I've written the following bit of CSS:
.bulb--off {
position: relative;
z-index: 11;
}
.bulb--on {
position: absolute;
z-index: 11;
left:rem(1);
right:0;
opacity:0;
}
.bulb--on {
opacity:0.4;
animation-name: bulbFlicker;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 1s;
}
#keyframes bulbFlicker {
0% { opacity: 1; }
25% { opacity: 0.9; }
50% { opacity: 0.95; }
75% { opacity: 0.9; }
100% { opacity: 1; }
}
What I hope to happen here is that the bulb would fade from off (opacity:0) to on (opacity:1) and then flicker.
What actually happens is that the bulb jumps from off to on (no fade) and then starts flickering, clearly what is happening is that when the animation starts it begins keyframe 1 as it should. I've tried adding a transition on opacity so that when it starts keyframe 1 it fades to it but it seems to ignore that property. Is there a way I can chain animations or even only make it play the first keyframe once?
I think I can do this using javascript but I've managed to get this far using CSS only and ideally I'd like it to remain CSS only.
If you apply two animations and add a delay to the second one equal to the length of the first animation you get the played first effect.
.light {
-webkit-animation: fade 3s;
animation: fade 3s;
opacity: 1;
}
.light .bulb {
-webkit-animation: jitter 1s infinite;
animation: jitter 1s infinite;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
#-webkit-keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes jitter {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 0.4;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes jitter {
0% {
opacity: 0.5;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
/*Meaningless stuff for it to look cool*/
.bulb {
width: 50px;
height: 50px;
border: 2px solid gray;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 50% 85%;
border-bottom-right-radius: 50% 85%;
background-color: yellow;
}
.metal {
margin-left: 10px;
width: 34px;
height: 10px;
background-color: gray;
border-bottom-right-radius: 10%;
border-bottom-left-radius: 10%;
}
.pole {
margin-left: 17.5px;
height: 100px;
width: 20px;
background-color: gray;
}
<div class="light">
<div class="bulb"></div>
<div class="metal"></div>
<div class="pole"></div>
</div>
is it possible to use css keyframes animation to pseudo-element such as 'before' and 'after'?
I am developing webservice for smartphone, and want to blink element. but do not want to blink element itself.
so, ways I came up with are two;
one is to cover element with another element, and blink that element;
and another is to use pseudo-element, but it seems not working.
css:
.fadeElement {
background-color: #000000;
width: 60px;
height: 60px;
}
.fadeElement:after {
display: block;
content: '';
position: relative;
height: 100%;
width: 100%;
z-index: 500;
background-color: rgba(249, 4, 0, 0.5);
animation-name: 'fade';
animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-name: 'fade';
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
}
#keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes 'fade' {
0% {
opacity: 0;
}
40% {
opacity: 0.5;
}
60% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
html:
<div class="fadeElement"></div>
Firefox, Chrome, and IE10+ support this.
See more info at Chris Coyier's site: http://css-tricks.com/transitions-and-animations-on-css-generated-content/