I want to get 5 name display animation done like I have 5 names
James
Selina
George
Kim
Abraham
Each name should appear in a different position.
I have this demo, video is coming in it now
To replace the video with text animation
like this but text animation
https://www.agora.io/en/
I am working now but issue is happening in different position please if you have any solution then you can give me here
I'm working on it right now:
https://valudas.com/Consultancy-Design/
HTML Code:
<div id="fly-in">
<div><span>Virat</span>Kohli</div>
<div>Rohit<span>Sharma</span></div>
<div>Rishabh<span> Pant</span></div>
<div><span>Mohammad</span> Shami</div>
<div><span>Jasprit</span>Bumrah</div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css?family=Montserrat:700');
body {
background-color: #111;
background-image: radial-gradient(#333, #111);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
text-align: center;
width: 100vw;
font-weight: 700;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
}
#fly-in {
font-size: 4em;
margin: 40vh auto;
height: 20vh;
text-transform: uppercase;
}
#fly-in span {
display: block;
font-size: .4em;
opacity: .8;
}
#fly-in div {
position: fixed; <!--codepen.io/h-kod/-->
margin: 2vh 0;
opacity: 0;
left: 10vw;
width: 80vw;
animation: switch 32s linear infinite;
}
#fly-in div:nth-child(2) { animation-delay: 4s}
#fly-in div:nth-child(3) { animation-delay: 8s}
#fly-in div:nth-child(4) { animation-delay: 12s}
#fly-in div:nth-child(5) { animation-delay: 16s}
#fly-in div:nth-child(6) { animation-delay: 20s}
#fly-in div:nth-child(7) { animation-delay: 24s}
#fly-in div:nth-child(8) { animation-delay: 28s}
#keyframes switch {
0% { opacity: 0;filter: blur(20px); transform:scale(12)}
3% { opacity: 1;filter: blur(0); transform:scale(1)}
10% { opacity: 1;filter: blur(0); transform:scale(.9)}
13% { opacity: 0;filter: blur(10px); transform:scale(.1)}
80% { opacity: 0}
100% { opacity: 0}
}
Thank you
Related
So am fairly new in CSS animation and I wanted to ask a question I created this box and it as a small box inside that rotates from top to bottom, right to left and alternate but am wondering how can I make that it rotates fully around continuously, from the point of origin.
I tried setting the transform translateX to -232% once it reach back at the point of origin but end up not going back to its origin as intent.
<div class="parent">
<div class="child"></div>
</div>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}
body {
font-size: 1.22rem;
line-height: 1.2;
}
.parent {
background: #aed4ff;
height: 300px;
width: 300px;
}
.child {
background-color: rgb(143, 36, 36);
width: 90px;
height: 90px;
display: block;
}
.parent:hover .child {
animation: left-to-right 2s ease-in-out forwards;
animation-play-state: paused;
cursor: pointer;
}
#keyframes left-to-right {
0% {
transform: translateX(0);
color: red;
}
33% {
transform: translateY(232%);
}
50% {
background-color: blue;
}
66% {
transform: translateX(232%) translateY(232%);
}
100% {
transform: translateX(232%);
background-color: black;
}
}
</style>
You need to add another keyframe with translateX(0) at 100% to move the element back to the original position, and for the other "transform-keyframes" use 25%, 50% and 75% instead of 33%, 67% and 100%.
And of course animation-iteration-count: infinite; to keep it going round.
So that would be
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif;
}
body {
font-size: 1.22rem;
line-height: 1.2;
}
.parent {
background: #aed4ff;
height: 300px;
width: 300px;
}
.child {
background-color: rgb(143, 36, 36);
width: 90px;
height: 90px;
display: block;
}
.parent:hover .child {
animation: left-to-right 3s ease-in-out forwards;
animation-iteration-count: infinite;
cursor: pointer;
}
#keyframes left-to-right {
0% {
transform: translateX(0);
color: red;
}
25% {
transform: translateY(232%);
}
50% {
transform: translateX(232%) translateY(232%);
background-color: blue;
}
75% {
transform: translateX(232%);
}
100% {
transform: translateX(0);
background-color: black;
}
}
<div class="parent">
<div class="child"></div>
</div>
You can set your animation to run continuously by adding this to your css
animation-iteration-count: infinite;
I am currently working on an intro transition. Where the following should happen:
A Background-Color transition from a set of different background colors
A word swapping transition -> here should each word change with a fade in and out + blur transition
The basics are working pretty good here, but I can’t get my head around that the whole transition working simultaneously.
Especially the blur in and out transition isn't totally out of timing. I tried so many different values.
My Code:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(1250, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(1250, "linear");
});
},3000);
})();
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: #C0FF01; }
33% { color: #013334; }
66% { color: #C0FF01; }
100% { color: #C0FF01; }
}
#keyframes glow {
0% { background: #013334; }
33% { background: #C0FF01; }
66% { background: #8E7DD2; }
100% { background: #C0FF01; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
}
.intro-content p {
max-width: 1215px;
padding: 0 50px;
color: #C0FF01;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont 9s infinite;
animation-delay: 3s;
animation-timing-function: linear;
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: #013334;
animation: glow 9s infinite;
animation-delay: 3s;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms linear 0s infinite normal none;
animation-delay: 3s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
20%{
-webkit-filter: blur(0px);
}
40%{
-webkit-filter: blur(8px);
}
60%{
-webkit-filter: blur(8px);
}
80%{
-webkit-filter: blur(0px);
}
100%{
-webkit-filter: blur(0px);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="intro-content">
<div class="intro-logo intro-claim">
<p>life is full of impressions. some of them remain. we create contemporary experiences, that people love to<span id="swap-text">Fade</span></p>
</div>
</header>
<div class="intro-background"></div>
Codepen:
https://codepen.io/Dennisade/pen/eYGBPjq
I think it is just a matter of having 4 different pendulums (animations) with varying time periods and balancing them. So I have made some changes to the time periods in your codepen, specifically css and js, see if this works for you.
CSS:
$transition: 500ms cubic-bezier(0.485, 0.355, 0.345, 0.950);
$green: #013334;
$lightblue: #E3EAF4;
$brightmood: #8E7DD2;
$yellow: #C0FF01;
$introvalue: 9s;
$introdelay: 3s;
body{
font-family: sans-serif;
font-weight:100;
padding:0;
margin: 0;
}
#keyframes colorfont {
0% { color: $yellow; }
33% { color: $green; }
66% { color: $yellow; }
100% { color: $yellow; }
}
#keyframes glow {
0% { background: $green; }
33% { background: $yellow; }
66% { background: $brightmood; }
100% { background: $green; }
}
.intro-claim{
opacity: 1;
}
.intro-content{
width: 100vw;
height: 100vh;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 0;
p {
max-width: 1215px;
padding: 0 50px;
color: $yellow;
// opacity: 0;
text-align: left;
font-size: 45px;
line-height: 1.2;
animation: colorfont $introvalue infinite;
animation-delay: $introdelay;
animation-duration: 6s;
}
}
.intro-background{
width: 100%;
z-index: -100;
height: 100vh;
display: flex;
position: fixed;
top:0;
background: $green;
animation: glow $introvalue infinite;
animation-duration: 6s;
animation-delay: $introdelay;
}
#swap-text{
margin-left: 12px;
font-weight:800;
animation: blur 4250ms infinite;
animation-delay: $introdelay;
animation-duration: 2s;
}
#keyframes blur {
0%{
-webkit-filter: blur(0px);
}
50%{
-webkit-filter: blur(8px);
}
100%{
-webkit-filter: blur(0px);
}
}
JS:
(function(){
var words = ['Fade', 'Blur', 'Word'], i = 0;
setInterval(function(){
$('#swap-text').fadeOut(500, function(){
$(this).html(words[i=(i+1)%words.length]).fadeIn(500, "linear");
});
},2000);
})();
https://codepen.io/gamezordd/pen/oNGYQwp
I need 3 dots "typing animation", I found something beautiful online -> https://codepen.io/mattonit/pen/vLoddq
The problem is it wont work, even on jsfiddle it stops working.
Ive tried hacking at the css a bit -> https://jsfiddle.net/leathan/nfhod84k/ but all i get are 3 dots that jump together :(
CSS in question
div#wave {
text-align:center;
width:100px;
height:100px;
margin-left: auto;
margin-right: auto;
}
.dot {
display:inline-block;
width:12px;
height:12px;
border-radius:50%;
margin-right:3px;
background:#303131;
animation: wave 1.3s linear infinite;
&:nth-child(2) {
animation-delay: -1.1s;
}
&:nth-child(3) {
animation-delay: -0.9s;
}
}
#keyframes wave {
0%, 60%, 100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
html
<div id="wave">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
See the codepen code. Its SASS. You need to convert the SCSS to CSS
You can use this site to convert as well.
The working version of the dots.
html,
body {
margin: 0;
padding: 0;
}
body {
background: #F6F7F8;
}
div#wave {
position: relative;
margin-top: 50vh;
text-align: center;
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
div#wave .dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
background: #303131;
animation: wave 1.3s linear infinite;
}
div#wave .dot:nth-child(2) {
animation-delay: -1.1s;
}
div#wave .dot:nth-child(3) {
animation-delay: -0.9s;
}
#keyframes wave {
0%,
60%,
100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
<div id="wave">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
In Codepen they've turned on a precompiler for Sass, which turns it into normal CSS. You either have to turn the precompiler on in jsfiddle, or use the compiled css directly:
html, body {
margin: 0;
padding: 0;
}
body {
background: #F6F7F8;
}
div#wave {
position: relative;
margin-top: 50vh;
text-align: center;
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
div#wave .dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
background: #303131;
animation: wave 1.3s linear infinite;
}
div#wave .dot:nth-child(2) {
animation-delay: -1.1s;
}
div#wave .dot:nth-child(3) {
animation-delay: -0.9s;
}
#keyframes wave {
0%, 60%, 100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
The giveaway is the nesting ;)
Actually, you are using SCSS code. SCSS needs to be compiled into CSS. USe the below-compiled CSS of the corresponding SCSS.
html, body {
margin: 0;
padding: 0;
}
body {
background: #F6F7F8;
}
div#wave {
position: relative;
margin-top: 50vh;
text-align: center;
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
div#wave .dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
background: #303131;
animation: wave 1.3s linear infinite;
}
div#wave .dot:nth-child(2) {
animation-delay: -1.1s;
}
div#wave .dot:nth-child(3) {
animation-delay: -0.9s;
}
#keyframes wave {
0%, 60%, 100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
Try this:
div#wave {
position: relative;
margin-top: 50vh;
text-align: center;
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
div#wave .dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
background: #303131;
animation: wave 1.3s linear infinite;
}
div#wave .dot:nth-child(2) {
animation-delay: -1.1s;
}
div#wave .dot:nth-child(3) {
animation-delay: -0.9s;
}
#keyframes wave {
0%, 60%, 100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
<div id="wave">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
It's written in LESS. Try swapping out the below.
div#wave {
position: relative;
margin-top: 50vh;
text-align: center;
width: 100px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
div#wave .dot {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 3px;
background: green;
animation: wave 1.3s linear infinite;
}
div#wave .dot:nth-child(2) {
animation-delay: -1.1s;
}
div#wave .dot:nth-child(3) {
background:yellow;}
#keyframes wave {
0%, 60%, 100% {
transform: initial;
}
30% {
transform: translateY(-15px);
}
}
<div id="wave">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
I found a CSS loading spinner here and it works great in IE and Firefox but I can't get it work in Chrome.
I added -webkit to the CSS provided but still nothing. Here is a JSFiddle of the code, test it out in the different browsers.
Is there anything I'm doing wrong or not adding?
HTML"
<div class="small progress"><div>Loading…</div></div>
<div class="progress"><div>Loading…</div></div>
<div class="large progress"><div>Loading…</div></div>
CSS:
#keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.progress {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .5em;
font-size: 12px;
text-indent: 999em;
overflow: hidden;
-webkit-animation: spin 1s infinite steps(8);
animation: spin 1s infinite steps(8);
}
.small.progress {
font-size: 6px;
}
.large.progress {
font-size: 24px;
}
.progress:before,
.progress:after,
.progress > div:before,
.progress > div:after {
content: '';
position: absolute;
top: 0;
left: 2.25em; /* (container width - part width)/2 */
width: .5em;
height: 1.5em;
border-radius: .2em;
background: #eee;
box-shadow: 0 3.5em #eee; /* container height - part height */
-webkit-transform-origin: 50% 2.5em;
transform-origin: 50% 2.5em; /* container height / 2 */
}
.progress:before {
background: #555;
}
.progress:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background: #777;
}
.progress > div:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
background: #999;
}
.progress > div:after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
background: #bbb;
}
Add this :
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
Link : Doc
I'm trying to animate the background-position of a div, slowly, but without it having jerky movement. You can see the result of my current efforts here:
http://jsfiddle.net/5pVr4/2/
#-webkit-keyframes MOVE-BG {
from {
background-position: 0% 0%
}
to {
background-position: 187% 0%
}
}
#content {
width: 100%;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
text-align: center;
font-size: 26px;
color: #000;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
I have been at this for hours and can't find anything that will animate slowly and smoothly at a sub-pixel level. My current example was made from the example code on this page: http://css-tricks.com/parallax-background-css3/
The smoothness of animation I'm after can be seen on this page's translate() example:
http://css-tricks.com/tale-of-animation-performance/
If it can't be done with the background-position, is there a way to fake the repeating background with multiple divs and move those divs using translate?
Checkout this example:
#content {
height: 300px;
text-align: center;
font-size: 26px;
color: #000;
position:relative;
}
.bg{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
animation-name: MOVE-BG;
animation-duration: 100s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes MOVE-BG {
from {
transform: translateX(0);
}
to {
transform: translateX(-187%);
}
}
<div id="content">Foreground content
<div class="bg"></div>
</div>
http://jsfiddle.net/5pVr4/4/
Animating background-position will cause some performance issues. Browsers will animate transform properties much cheaply, including translate.
Here is an example using translate for an infinite slide animation (without prefixes):
http://jsfiddle.net/brunomuller/5pVr4/504/
#-webkit-keyframes bg-slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.wrapper {
position:relative;
width:400px;
height: 300px;
overflow:hidden;
}
.content {
position: relative;
text-align: center;
font-size: 26px;
color: #000;
}
.bg {
width: 200%;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) repeat-x;
position:absolute;
top: 0;
bottom: 0;
left: 0;
animation: bg-slide 20s linear infinite;
}
You should adjust your HTML and CSS little bit
Working Demo
HTML
<div id="wrapper">
<div id="page">
Foreground content
</div>
<div id="content"> </div>
</div>
CSS
#-webkit-keyframes MOVE-BG {
from { left: 0; }
to { left: -2000px; }
}
#wrapper {
position:relative;
width:800px;
height: 300px;
overflow:hidden;
}
#page {
text-align: center;
font-size: 26px;
color: #000;
}
#content {
width: 2000px;
height: 300px;
background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
position:absolute;
top: 0;
left: 0;
z-index:-1;
-webkit-animation-name: MOVE-BG;
-webkit-animation-duration: 100s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}