Simple Text Animation Just By Using HTML & CSS

join our group in facebook
/ 704904666369941
like our page
/ darkcode0
Paypal Donation Link
paypal.me/YBen...
Take Files From Here
goo.gl/zbMbcf
tags
simple css text animation effects
simple text animation css
simple text animation in css
simple text animation css3
Music__
Cold Funk - Funkorama by Kevin MacLeod is licensed under a Creative Commons Attribution license (creativecommon...)
Source: incompetech.com....
Artist: incompetech.com/
Music promoted by Audio Library • Cold Funk - Kevin MacL...

[@susankrywicki9019]

Finally a tutorial that is paced well!!! Thank you!!!!

[@DarkCodeOnline]

Welcome

[@yorkie4k]

Great Tutorial. Super easy to follow! I feel like I'm becoming better at HTML/CSS every day when I follow your videos!

[@Complex_youtube]

Cool, but I really wish you would explain things

[@mofurry8430]

Timothy Sturdevant what do you want to know

[@zeeshan_yousaf]

I want to know what is key frame?

[@chubbyBunny94]

@@zeeshan_yousaf Almost every animation software uses keyframes. A keyframe is 'key=important' 'frame=snapshot/section' of the animation as a given point in time. In other words, it's like saying when the time is 5 seconds I want the animation to look like X. The computer does the work to figure out what needs to change between keyframes to make sure the animation matches a particular keyframe

[@jv18creator]

@@chubbyBunny94 make sense 👌

[@bus1966]

@@zeeshan_yousaf google it!

[@brenersousa2812]

u are a monster, ty for code
brazil loves u

[@DarkCodeOnline]

Welcome brother

[@ashafio]

Thank you DARKCODE...Love from BANGLADESH.

[@guilhermequintino8951]

Thank you DarkCode. I Am From Brazil and see your videos forever. Sorry, my english is horrible.

[@DarkCodeOnline]

welcome brother

[@guilhermequintino8951]

@@DarkCodeOnline Thank you

[@rajashekhar433]

I have implemented by your video and it's really great

[@SkexYouTube]

ATOM

[@vittoriobertolino]

@@SkexRUclips ATOMIC

[@vilohith9076]

thank you so much man, your tutorial actually worked!

[@rakshanc2519]

super and thanks a lot

[@phosphophyllite4588]

i had to subscribe
i have seen the best tutorial yet!

[@seymen2772]

css code:
*{
padding: 0;
margin: 0;
font-family: sans-serif;
}
body{
background: #000;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
}
.container span{
color: white;
text-transform: uppercase;
display: block;
}
.text1{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
background: black;
position: relative;
animation: text 3s 1;
}
.text2{
color: #6ab04c;
font-size: 30px;

}
@keyframes text {
0%{
color: black;
margin-bottom: -40px;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
}

[@SRDFTM]

Please, never stop doing this videos!!

[@htmlkhaled2305]

very nice ... thanks

[@ACALearn]

very nice

[@rkyadav5952]

Wow ..good . Plzz speak while making your video so that we not only make animation by copying your code but also we are able for self coding .. tnku

[@hibi9528]

exciting tutorial ,just awesome,want more.....

[@ayobomari8990]

is great can you speak in vedio for we knew understand
and thank you

[@ACALearn]

i have i am teacher

[@kingkiitt7355]

Agree. I'm a noob in programming and I often don't know what is happening in tutorials.

[@Pupuzela]

No need to talk, just observe and connect the dot. You are smart enough.

[@GanicuusFleXiTDrakensangOnline]

@@kingkiitt7355 html and css is not programming

[@iyliarasyad5963]

@@GanicuusFleXiTDrakensangOnline what you're trying to say is html and Css is coding not programming, right?

[@firjaunbarlaman7097]

Thank u, so worth it!

[@erlanerlan7739]

ARE YOU KIDDING MEE???? I love you!!!!! I want to see all your videos !!

[@soulfly9306]

You realy good at this job. İ proud of you :D Go on !! :D

[@tahep3906]

wow, I am planning to use this animations for quotes page with sleek design, thanks a lot for this inspiring video

[@hassanzaibsocial5818]

the animation or the moving of text is not working! help please!!!

[@talabsa4108]

You legend
I studying for channel

[@hthclash1970]

So simple and nice, thanks man👍

[@wwssr]

This clip awesome dude...thank you

[@ubtcreatives2695]

yet simple n attractive.

[@kareemafara-ll6oo]

very cool and usefull video thanks

[@parth_sanchania_0074]

amazing css coding wenderfull .
Thanks Bro.
;-)

[@Ebeninkisi1]

You are great. Thank you!

[@ug_it_english]

जय होस् Thanks for sharing

[@ivar3243]

Loved it, thanks!

[@nelsonerwinaleluyaquispe6528]

Excelente, un saludo desde Bolivia.

[@dedisupardi2815]

Excellent👍 thank you so much for sharing it to us

[@rsezuni]

Your work is amazing!

[@anonym2.068]

keep it up m man

[@iamkakarotsaiyan3918]

Awesome!

[@Lkk233]

Which editor you are using bro?...bdw good video 💕
Love from India

[@eduerjaramillo1831]

me gustan estos videos que son rapidos y van al gro a lo que es

[@Akdo333]

Thank you, bro

[@learnAndfun101]

I'm being inspired dude !!❤

[@rick_sanz_oficial]

love your videos tks

[@ouridea1015]

Awesome

[@SSCAT0]

Danke 😊

[@Moshe5573]

do you have any more text animation videos? I have been struggling leaning them.
great video by the way

[@suchiridi9693]

thank you bhava...

[@team-planning]

Big thanks

[@MAzeemSidd]

Brilliant bro... I really inspired...

[@niranjanagupta2938]

Superb bro

[@umaldo7]

Great vid! Thanks for sharing.

[@Senthilkumar-qb8jv]

What compiler are You Using?
Please tell the name??

[@jayeshjadhav6266]

That was really awesome tutorial 👍👍

[@burhanrasitbuyukgur3910]

nice video. What is the program you are using?

[@kod3619]

It is Atom.

[@bodybody5609]

So cool no bullshit at all

[@shetiratan]

Professional Web design kayse coding kare इसपर video बनवाए bro 🙏

[@samuelfrank9947]

Cool bro

[@stevemarshall2358]

Nice

[@gabrielmarques21]

Good job!

[@devyeasir4192]

thanks for tips

[@Victoria-ly2ij]

cool, thanks!

[@DarkCodeOnline]

♥♥

[@CrisAlaskaLyall]

so keyframes are declared in % instead of seconds, and the margin bottom defines the "DARKCODE" movement at 0% to 30% - hopefully i understood that right, else i need to find another video to this XD good job even without voice :)

[@PritishMishra]

Nice dude

[@drwskincarecibitung9894]

thank you

[@beerekartheek9184]

Super

[@quangphung5481]

great. thank you

[@КириллГагарин-ь2с]

Super!!!!

[@Nevermind-cg5wr]

what's url of website where he picks a color?

[@NotLefty.]

Nevermind flat ui icons.

[@krisden7122]

Hey there, I just want to ask, What "*" means? What use of this symbol? can someone explain to me? Thank You!

[@DarkCodeOnline]

* is a selector for select all elements and give them that style

[@krisden7122]

@@DarkCodeOnline oh. Thank you, Sir!

[@omarmarufi7852]

# foo {} will style the single element declared with an attribute id="foo"
* foo {} will style all elements with an attribute class="foo" (you can have multiple classes assigned to an element too, just separate them with spaces --- class="foo bar")

[@rodolfhoazevedo5420]

@@omarmarufi7852 class is .foo, not *foo

[@donsilver3728]

Also in ASCII this sybol is the number 42. Since the *, or asteriks, can be used as wildcard in the most programming languages, it can be literally everything. This is the hidden meaning behind 42 is the answer to the question of everything.

[@axanka4]

Very cool !!

[@UFU-UpdateForU]

Really great bro Nd u responding to all the comments ,,,,
There r few peoples do this ur 👍

[@DarkCodeOnline]

=) welcome

[@theguynextdoor8834]

Thanks so so much!
Just 1 question, How would I do the same effect but only in hover ?
I've tried every possible way in my knowledge but didn't work.

[@dinushkamahawedage3186]

Magnificient

[@Daniel71069]

Like the video, did help a lot! but how do you make the animation fade/go away after a couple seconds? like i want it to show for about 3seconds after then go away?

[@md.kh.s]

thanks 😍

[@junedshaikh5162]

good htmlization

[@likogunardi6699]

Buat refresh ... Thx

[@WhiteoutMonster]

One huge thing I'm not understanding is theres no name to the animation. I wonder if this whole process is completely different for animate.css

[@marivikki.b]

Why @keyframes doesn't work ??In my pc...

[@juanchoo22xd]

que tal gente, soy jimmy....

[@anjnasharma5308]

DarkCode, which software are you using?

[@c-leg]

It should be Atom

[@Ouissalfg]

Atom

[@LuisSuchil]

Great video !!!

[@PashtoTechChip]

Awesome code

[@mdoverflow7683]

if i copied and pasted the animated text into a document, would it still do the cool effect?

[@Manojkumar-gr1dn]

Thanks

[@umarfarid478]

Well

[@payaljaiswal3305]

Nice 😍

[@Znaczek]

thank you, you are my master. Really

[@sooth6295]

Wow

[@salehmajeed]

Amazing but how this page will disappear to show the actual home page??

[@salehmajeed]

@Pi ok thank you so much

[@rajashekhar433]

Superbbbbbbb

[@theshadow8496]

bro how did u make that second screen otput screen in vs or sumblime

[@ldnoobsgameplay2250]

In which app he is making this please tell me???

[@DarkCodeOnline]

it is atom

[@danieldukundane271]

nice guitar

[@mikazuchiashura255]

Idk what happen but I completely copy every single line of your code and it doesn't work

[@CodGame-b7x]

Must check the library added in link ......

[@GuitarsRgood7]

Good stuff!

[@barewr828]

Awesome video, but my ATOM does not work with css, what packages do you use? Thanks

[@diegohenrique5227]

Is very good code😍😍

[@arifandihartono1812]

Thank You so much BOIIII

[@t33a25]

now I like the photo of my profile

[@joaoassembleia8575]

hey how can i do this but left to right and a border expand on the left side ?? pls help me how i do this

[@bassey1246]

How do you divide it into 2 spaces like dt?