#css animations
Explore tagged Tumblr posts
Text

Animated Gradient Background
#animated background#css animation#css animation tutorial#css animation examples#css animated background#background animation#html css#divinector#css animations
2 notes
·
View notes
Text
Scroll Driven Animations Notebook
New Post has been published on https://thedigitalinsider.com/scroll-driven-animations-notebook/
Scroll Driven Animations Notebook
Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks” that make it easy for him to demo code. He’s got one for gradient text, one for a comparison slider, another for accordions, and the list goes on.
One of his latest is a notebook of scroll-driven animations. They’re all impressive as heck, as you’d expect from Adam. But it’s the simplicity of the first few examples that I love most. Here I am recreating two of the effects in a CodePen, which you’ll want to view in the latest version of Chrome for support.
This is a perfect example of how a scroll-driven animation is simply a normal CSS animation, just tied to scrolling instead of the document’s default timeline, which starts on render. We’re talking about the same set of keyframes:
@keyframes slide-in-from-left from transform: translateX(-100%);
All we have to do to trigger scrolling is call the animation and assign it to the timeline:
li animation: var(--animation) linear both; animation-timeline: view();
Notice how there’s no duration set on the animation. There’s no need to since we’re dealing with a scroll-based timeline instead of the document’s timeline. We’re using the view() function instead of the scroll() function, which acts sort of like JavsScript’s Intersection Observer where scrolling is based on where the element comes into view and intersects the scrollable area.
It’s easy to drop your jaw and ooo and ahh all over Adam’s demos, especially as they get more advanced. But just remember that we’re still working with plain ol’ CSS animations. The difference is the timeline they’re on.
Direct Link →
#animation#animations#chrome#code#comparison#CSS#CSS Animation#css animations#css-tricks#easy#effects#how#it#Link#links#list#One#scientist#scroll#Scroll Driven Animation#simplicity#slider#text#timeline#transform#Version#view
0 notes
Text

Creative CSS Menu Hover
#css menu hover#pure css animation#css animation tutorial#css animations#html css#codenewbies#pure css tutorial
1 note
·
View note
Text

Split Screen Hover Animation
#split screen hover animation#css animation#css tricks#css effect#css animation tutorial#css animations#cool css animation#html css#codingflicks#frontend#webdesign#learn to code#code#css#html#frontenddevelopment#animation#css hover animation
0 notes
Text
0 notes
Text

Thinking about these kids again. One of greatest anime love rivals to lovers ever to me. Also here one of my fave artworks of mine from 2023.
#from both of them crushing on the same friend of her older brother to falling for eachother. these kids.. smh#😭❤️#carpet's art#2023#cardcaptor sakura#syaosaku#cardcaptor sakura sakura#Cardcaptor sakura syaoran#Syaoran Li#Sakura Kinomoto#kinomoto sakura#li syaoran#magical girl#ccs sakura#css fanart#cardcaptor sakura fanart#hiddencarpet#mahou shoujo#magical girls#shoujo anime#artists on tumblr#described
209 notes
·
View notes
Text
🍀 Lucky ☆ Theme! 🌺
My first F2U Template that I have uploaded. I hope someone will find this useful!
Please keep in mind that even myself, is amateur at coding. So please, if you find any error, contact me via email ( [email protected] ) I'll be happy to help.
Find the template's code here. It should be easy to understand. If you need any help installing the code, again, send me an email!
:*:・。,☆゚'・:*:・。,ヽ(・∀・)人(・∀・)ノ ,。・:*:・゚'☆,。・:*:
#old web#2000s#old internet#2000s web#anime#2000s anime#webdesign#graphics#web graphics#art#website#web site#site#code#coding#HTML#CSS#neocities#html css#template#f2u#theme#my themes#f2u base#00s#clover#clovers
876 notes
·
View notes
Text
super happy to share these, i personally adore them...
TRADING CARD(ish) WIDGETS FOR YR SITE OR BLOG OR WHATEVER!!~
FEATURES:
-super cool
-animated af
-mad stylish
-buttons!!!! dynamic effects!!!
DOWNLOAD HERE, AND HERE LIVE PREVIEW ONE, TWO BY NUMBPILLED ON KO-FI (ps if you do end up using these lmk, i wanna see >.>)
#css#cybercore#neocities#old web graphics#neocities template#html#html css#htmlcoding#web graphics#web resources#gif#free widget#widget#neocities resources#carrd resources#rentry decor#rentry graphics#rentry gif#rentry inspo#rentry png#rentry resources#rentry template#trading cards#orrery#celestial#three.js#animation#low poly#neocities themes#neocities theme
79 notes
·
View notes
Text
Stickbug Wiki UPDATE!
NOTE: I've noticed on some browsers like Firefox, it takes longer to update and looks BAD at first. I've found if you press "CTRL + SHIFT + R" it helps, but if it doesn't please tell me so I can find a solution.
Introducing
TWO NEW MAJOR UPDATES: featuring the new Rise of Rocket Corp chapter, and the character page for Ochre! These took some time to get out, but I'm so glad to finally have some new writing on the site again.
And while @tatos-stick-pile created just as much for this AU as I have, I really want to thank her again for writing Ochre's page, since Ochre is basically her character and has such an influence over the AU. Enjoy!
Website Link Here & Ao3 Story Port Here!
Full Update List Under Cut
Major Updates:
New Story Chapter: Rise of Rocket Corp
New Character Page: Ochre
Minor Updates:
Downscaled the size of the text when on mobile
2 new additions to Green Screen's gallery
Made the floating figs bigger when on desktop
#my writing#my art#anim vs bf au#animator vs animation#ava#animation vs minecraft#avm#coding#html#css#neocities
25 notes
·
View notes
Text



lucky star themed blinkies, pngs, and stuff for your websites! heres something cool for heyspace too: konata dancing for sites link click
#lucky star#konata izumi#pixels#graphics#neocities#gifs#pngs#graphic designs#digital design#anime#kawaii#my space#4chan#website decor#websites#coding#heyspace#layouts#programming#code#html#html css
29 notes
·
View notes
Photo

Animated Dropdown menu Check out Divinector YouTube Channel For more
#css menu#html css dropdown menu#drop down menu css#css dropdown menu#css dropdown#html css#css animation examples#css animations#pure css animation#html5 css3#dropdown navbar#divinector#learn to code#code
2 notes
·
View notes
Text
CSSWG Minutes Telecon (2024-08-14)
New Post has been published on https://thedigitalinsider.com/csswg-minutes-telecon-2024-08-14/
CSSWG Minutes Telecon (2024-08-14)
I was just going over the latest CSSWG minutes (you can subscribe to them at W3C.org) and came across a few interesting nuggets I wanted to jot down for another time. The group discussed the CSS Values, CSS Easing, and Selectors modules, but what really caught my eye was adding triggered delays to CSS for things like hover, long taps, and focus states.
The idea stems from an OpenUI proposal, the same group we can thank for raising things like the Popover API and customizable select element. The concept, if I understand it right, is that anytime someone hovers, taps, or focuses on, say, a <button> for a certain amount of time, we can invoke some sort of thing. A tooltip is the perfect illustration. Hovering over the trigger element, the reasoning goes, is an expression of interest and as web authors, we can do something with that interest, like displaying a tooltip.
Whoa, right?! There’s long been chatter about CSS encroaching on JavaScript territory (isn’t it ironic, don’t you think?). Firing events in response to interaction is quite literally the only thing I use JavaScript for. There’s no mistake about that in the CSSWG, as documented in the minutes:
So. Does this belong in CSS? Or should it be elsewhere? Does the approach make sense? Are there better ideas? Most interested in the last.
[…]
Other question; does this belong in CSS or HTML… maybe this is just a javascript feature? In JS you can determine MQ state and change things so it wouldn’t necessarily be in CSS.
And shortly later:
As you were talking; one thing that I kept thinking of; should developers be customizing the delay at all? Original use case for delay is that hover shouldn’t be instant. But if we don’t allow for customizing we can align to platform delay lengths.
But there’s an excellent point to be made about the way many of us are already doing this with CSS animations (animation-delay) and transitions (transition-delay). Sometimes even applying those globally with the Universal Selector or a prefers-* query.
Things get even hairier when considering how values are defined for this. Are they explicit delays (800ms), generic keywords (none/short/medium/long), a custom property, a pseudo-class… something else? I’m glad there’re incredibly smart folks noodling on this stuff.
I think here it would be good to go with time values. CSS is a good place to put it. We have all the ergonomics. The right declarative place to put it.
Whatever the eventual case may be:
I think this sounds reasonable and I’d like to explore it. Unsure if this is the exact shape, but this space seems useful to me.
#2024#animation#animation-delay#animations#API#approach#change#CSS#css animations#csswg#Delay#developers#Events#eye#focus#hover#how#HTML#Ideas#illustration#interaction#it#JavaScript#js#notes#One#Other#platform#popover#Query
0 notes
Text

Replace the Image On hover
#replace image on hover#change image on hover#css change image on hover#html css animation#css animation examples#css animation tutorial#css animations#codenewbies#html#css#html5 css3#frontenddevelopment#pure css animation#html css#code
1 note
·
View note
Text

Split Screen Image Hover Effect
#split screen hover effect#css animation tutorial#css animations#pure css animation#html5#learn to code#html css#code#webdesign#css#html#css3#frontenddevelopment#html5 css3#frontend#css hover effects#css hover animation
0 notes
Text
Read @Learn and Create Social Sharing Buttons Now...
#program#learn css animation#programming#pure css animation#html#js#animation student#html5 css3#html5#css#css sharing buttons#css buttons#css animations#css effects#codeaj
0 notes
Text
Hello audience. Unfortunately, I am still on my break. However, I am happy to announce that I am still alive and kicking. In fact, I decided to make use of my unemployment and revisit HTML, CSS, and JavaScript to create... A visual novel.
Good News: code is 100% reusable because I used a JSON (i do not know how that works, someone can kindly explain to me...)
Bad News: this code sucks ass, and NOTHING works except playing the story. Transitions? Doesn't work. UI/UX? Ass. Effects? Hell no... Also, 70% of the features aren't present yet I'm gonna do it later.
Oh, this is CrossDust, if you can't tell.


Dust Sans by Ask-Dusttale, Cross Sans by Jakei
I'm gonna respond to asks and do requests later (After my break is over). This is just a small update teehee.
#dsevalyappuccino#TIME TO GO INSANE IN THE TAGS!!#i hate css#i still hate css#css hell no#guys why is css so hard. ive literally been doing this for months and css is still hard#i was about to use css spritesheets for the sprites and emotions#but my ass gave up and instead i just use seperate images#GUYS!!! DISPLAY: FLEX 💪. DISPLAY: GRID?!?!#javascript i hate you tooq#i hate java script naurrrr#what do you mean DOM objects#what do YOU MEAN#also i do not understand error handling and JSON integrations#papaGPT doesn't explain anything#i don't know what I just wrote#coding???????????#kids don't be unemployed#actually maybe if you're unemployed but still making money that's great#also the sprites are just for testing purposes im probably gonna make new better ones if i chose to expand this into#a full blown anime high school visual novel project#i don't wanna think of all that story crap but then again i can just write the cringiest thing on earth
23 notes
·
View notes