I am beginner to animation in CSS and I have exported from desing file CSS animation code for animation like this.
#keyframes first {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes second {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
#keyframes third{
from {
opacity: 1;
}
to {
opacity: 0;
}
}
animation: ${first} 307ms ease-in-out 0ms normal,${second} 2193ms linear 307ms normal,
${third} 503ms ease-in-out 2500ms normal;
However I wonder if it is possible to make it in one animation? If I want to have the same times like in generated version. If so, in what way?
Related
I used "animation-iteration-count: infinite" but it needs to be used of every line separately. I need it to be applied on all lines combined. My code uses separate CSS class for every line which is quite annoying. I need one single class to be applied on whole text no matter how many line or paragraphs there are. Below is my code.
.css-typing p {
font-family: "Courier";
font-size: 14px;
width: 200em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 2s steps(40, end);
animation: type 4s steps(40, end);
animation-iteration-count: infinite;
}
.css-typing p:nth-child(2) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 2s steps(40, end);
animation: type2 4s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 5s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
white-space: nowrap;
overflow: hidden;
opacity: 0;
-webkit-animation: type 5s steps(40, end);
animation: type3 4s steps(40, end);
-webkit-animation-delay: 3s;
animation-delay: 10s;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes type {
from {
width: 0;
}
}
#-webkit-keyframes type {
from {
width: 0;
}
}
span {
animation: blink 1s infinite;
}
#keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type2 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes type3 {
0% {
width: 0;
}
from {
opacity: 0;
}
1% {
opacity: 1;
}
to {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="css-typing">
<p>
Typed <br> text 1
</p>
<p>
Typed text 2
</p>
<p>
Typed text 3
</p>
</div>
I think CSS animation is not the way to go.
If possible, you can actually write the characters to the browser from JS.
From the top of my head you should have:
Text in JS array. each element represents a line.
setInterval that calls a function that pops each time a line
another setInterval or setTimeout that will put each letter there, using substr and keep an index where you are at any given time.
If you don't want to code, google for codepen typing effect, I'm sure you will find something you will like.
I wanted to have an image fade permanently until the user refreshes the page, and I was able to do so with animation-fill forwards. However, I would like this animation to initiate only when you hover over it.
I am able to make an image fade with hover independently, but it resets after the user moves their cursor from the element. In short, I am unable to make the transition and the hover effect work in conjunction.
Here is the HTML
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
Here is the CSS
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
top: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
This is the codepen to my project: https://codepen.io/narutofan389/collab/LYpxqmY
Much obliged for your help.
:hover state only applies when it is hovered, so it will not persist. I would recommend toggling a class on mouseenter via javascript. I've attached a fiddle to accomplish what you're intending. Let me know if you need any clarity. :)
document.addEventListener("DOMContentLoaded", function() {
var img = document.getElementById("hill");
img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill.hide {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
You can consider animation-play-state and have the animation defined on the element initially but the duration need to be short because it won't work if the user rapidly move the mouse
#hill {
position: relative;
height: 100vh;
animation: fade 0.5s paused forwards;
}
#hill:hover {
animation-play-state:running;
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
How to restart group animations in css?
I need to run them again, applying the delays. Meaning when zoomersout is done it will run the zoomers1 (including the 2s delay) from the start.
I tried to use infinite but what happens is it zooms every 1s. The delay runs once only....
how to make this if possible?
css
.letter1{
color:#74ee76;
animation: zoomers1 1s ease-in-out forwards,zoomersout 1s ease-in 1s forwards;
}
.letter2{
color:#7674ee;
animation: zoomers2 1s ease-in-out 1s forwards,zoomersout 1s ease-in 2s forwards;;
}
#keyframes zoomers1 {
from {
z-index: 100;
scale: 1;
}
to {
font-size:1000px;
scale: 1;
z-index: 0;
}
}
#keyframes zoomers2 {
from {
z-index: 200;
scale: 0;
}
to {
font-size:1000px;
z-index: 0;
scale: 1;
}
}
#keyframes zoomersout {
from {
font-size:1000px;
z-index: 0;
scale: 1;
}
to {
font-size:1000px;
z-index: 0;
scale: 100;
}
}
html
<div class="lett letter1" style="position:absolute" >F</div>
<div class="lett letter2" style="position:absolute" >R</div>
example i wish to happen...
rerun(){
run-> animations in letter1 after animations letter2 is done
run-> animations in letter2 after animations letter1 is done
}
Not sure how is this possible in css/javascript/jquery...
Appreciate any solution... Thanks!
You have to set your .letter1 animation style to "none".
Example below :
var myelement = document.getElementByClassName("letter1");
myelement.style.animation = "none";
myelement.style.offsetHeight; //now set offset
I'm trying to coding this text animation effect (please see video) but i'm quite far from solution!!
Can you please help me? maybe is better using js?
h1.fadeinone { animation: fadeinone 10s;}
h1.fadeintwo { animation: fadeintwo 10s;}
h1.fadeinthree { animation: fadeinthree 10s;}
#keyframes fadeinone {
0% {
opacity: 0;
}
33% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeintwo {
0% {
opacity: 0;
}
66% { /* 3s for fade in */
opacity: 1;
}
}
#keyframes fadeinthree{
0% {
opacity: 0;
}
100% { /* 3s for fade in */
opacity: 1;
}
}
#claim h1 {
font-size: 40px;
line-height:40px;
margin:0px;
padding:0px;
color:#FFF;
}
#claim {background-color:red;}
<div id="claim">
<h1 class="fadeinone">DESIGN</h1>
<h1 class="fadeintwo">loren ipsum</h1>
<h1 class="fadeinthree">DOLOR SIT</h1>
</div>
I think you are looking for the animation-delay property. It's a bit tedious, because you'll have to separate out each letter of each line into its own element (I used span in this case), and then you'll have to manually assign each span its own delay, but the effect matches what you provided.
Also, by using this method, you only need one set of keyframes, because you'll be using the delay to determine when the animation starts, rather than using a percentage over multiple animations.
div span
{
opacity: 0;
animation-name: fadein;
animation-duration: 3s;
animation-fill-mode:forwards;
}
div span:nth-child(1){animation-delay:0s}
div span:nth-child(2){animation-delay:0.2s}
div span:nth-child(3){animation-delay:0.4s}
div span:nth-child(4){animation-delay:0.6s}
div span:nth-child(5){animation-delay:0.8s}
div span:nth-child(6){animation-delay:1s}
#keyframes fadein
{
0%{opacity: 0}
100%{opacity:1}
}
<div>
<span>D</span><span>E</span><span>S</span><span>I</span><span>G</span><span>N</span>
</div>
Of course, you could do this with Javascript and the solution would likely be more elegant and easier to modify; however, then you have to deal with compatibility issues. You're going to be better off just sticking with strict CSS whenever possible.
It's like the animation they have on npm front page and also on the brown hackathon page. Where a piece of text erases and appears every few seconds with different content. I think There may be an existing template for it online, but what do they call it?
This is basic idea how to create this kind of animation check following snippet:
If you want to expend this animation just add letters in array.
$(function() {
var arr = ['t','te','tex','text','G','Go','Goo','Goog','Googl','Googl','Google'];
var elem = $('#ani');
var i = 0;
var loop = function(){
elem.text(arr[i++]);
if(i>arr.length) {
//clearInterval(intervalID);
i=0;
}
}
var intervalID = setInterval(loop, 500);
})
.test{
font-size:26px;
color:green;
}
.ani{
color:red;
}
.ani::after{
content:"|";
-webkit-animation: cursor-blink 0.8s linear infinite;
-moz-animation: cursor-blink 0.8s linear infinite;
-o-animation: cursor-blink 0.8s linear infinite;
animation: cursor-blink 0.8s linear infinite;
}
#-moz-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-o-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="test">
This is text
<span class="ani" id="ani">
Google
</span>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>