SlideShare uma empresa Scribd logo
1 de 52
Mastering CSS
animations and
transitions
About me
•

Hi, I’m GoodBytes

•

I teach web development to my Interactive Multimedia Design students in
Mechelen, Belgium. More info at http://www.weareimd.be

•

I’m a freelance web developer, get in touch via http://www.goodbytes.be
or just shoot me a message on Twitter @GoodBytes
About this slide deck
•

I used this slide deck during a workshop I gave about CSS
animations and uploaded them upon request

•

The slides will probably lose about 80% of their meaning without the
accompanying explanation and demo’s given during the workshop

•

All screenshots you see are actually video’s to demo an animation.
Like I said, this deck will lose about 80% of its meaning without the
videos and matching explanation

•

If you’d like to get a thorough workshop about CSS animations, feel
free to get in touch with me at http://www.goodbytes.be
When was the last time something
on the web delighted you?
http://uxrave.com/
http://uxrave.com/
Mastering CSS Animations
Mastering CSS Animations
Live icon

http://dribbble.com/pattern
http://space.angrybirds.com/launch/

http://joelb.me/scrollpath/
http://dribbble.com/shots/419244-Login-animation
http://www.smashingmagazine.com
animations, transitions,
transformations,
translates
you will be creating animations
where you call a transform that
uses a translate function
Mastering CSS Animations
transitions
•

an animation between changes

•

properties we want to animate need to be defined explicitly

•

can be triggered by adding classes of using pseudo-selectors
like :hover

•

example 1: change button color on hover (and animate it!)

•

example 2: motion by changing the position of an element
transitions

•

transition: property duration timing-function delay;

transition: background-color 5s linear 1s;
<div id="circle"></div>!

#circle!
{!
! width: 200px;!
! height: 200px;!
! background-color: white;!
! border-radius: 50%;!
! transition: height 1s linear, width 1s linear, background-color 5s linear 1s;!
}!
!

#circle:hover!
{!
! height: 300px;!!
! width: 300px;!
! background-color: red;!
}!
Mastering CSS Animations
transitions
•

transitioning properties like left and margin cause a browser to
recalculate styles every frame.

•

repaints (visibility) & reflows (layout)

•

can be bad for performance, especially on slower mobile
devices

•

solution: use CSS transformations to enable GPU hardware
acceleration where appropriate
using translate

using top/left coordinates
transform(ation)s
•

physically change the look of an element

•

example 1: change the size of an element

•

example 2: rotate/spin an element

•

example 3: move an element

•

can be 2D or 3D
transitions with transforms
<div id="shape"></div>!
#shape!
{!
! width: 150px;!
! height: 150px;!
! background-color: #e74c3c;!
! transition: -webkit-transform 1s;!
}!
!

#shape:hover!
{!
! -webkit-transform: scale(2) translateY(100px) rotate(45deg);!
}!
Mastering CSS Animations
you will be creating animations
where you call a transform that
uses a translate function
Mastering CSS Animations
animations vs.
transitions
transitions

animations

go from A to B

got from A (over B, C, D, E) to … via keyframes

need to be triggered somehow

can start automatically and loop

you have to be formal about which properties
you want to animate

Transforms are ways to change your shapes with scale(), rotate(), skew(),…
2D transforms
•

translate()

•

rotate()

•

scale()

•

skew()

•

matrix() = all of the above
<div id="square"></div>!

#square!
{!
! width: 200px;!
! height: 200px;!
! background-color: white;!
! border-radius: 10%;!
! margin-left: 0px;!
! transition: -webkit-transform 0.5s;!
}!
!

#square:hover, #square.automatic!
{!
! -webkit-transform: scale(2.2) translate(200px, 100px) skew(10deg)
rotate(45deg);!
}!
Mastering CSS Animations
animations

•

keyframes

•

can loop

•

can start automatically
<div id="square" class="automatic"></div>!

.automatic!
{!
! -webkit-animation: moveIt 2s infinite;!
}!

@-webkit-keyframes moveIt!
{!
! 0%
{ }!
! 25% { -webkit-transform: rotate(45deg);}!
! 50% { left:50%; top: 50%; -webkit-transform: scale(2.5) rotate(45deg);}!
! 100% { -webkit-transform: rotate(0deg);}!
}!
Mastering CSS Animations
3D transforms
•

-webkit-transform: perspective(300px) rotateY(20deg);

•

perspective() sets the angle of the view
•

the higher the value the further you are away from the element

•

the lower the value the closer you are to the element

•

your will be using rotateY() and rotateX() the most

•

x,y,z
y-axis

x-axis
Mastering CSS Animations
http://flisterz.com/foldcover/
http://codepen.io/s8770125/pen/gLrux
https://developer.mozilla.org/en-US/demos/detail/paperfold-css/launch
<div id="element" class="flipInY"></div>!
.flipInY!
{!
! -webkit-transform-origin: left bottom;!!
! -webkit-animation: flipInY 1s;! ! ! !
! -webkit-animation-fill-mode: forwards;!
}!
!

@-webkit-keyframes flipInY!
{!
! 0%
{ -webkit-transform: perspective(400px) rotateY( 90deg ); opacity: 0; }!
! 40%
{ -webkit-transform: perspective(400px) rotateY( -10deg ); }!
! 70%
{ -webkit-transform: perspective(400px) rotateY( 10deg ); }!
! 100%
{ -webkit-transform: perspective(400px) rotateY( 0deg ); opacity: 1; }!
}!
Mastering CSS Animations
Mastering CSS Animations
you will be creating animations
where you call a transform that
uses a translate function
Mastering CSS Animations
Get to work: animation1
Get to work: animation2
pitfalls
web dev hell
browser support
•

do I need vendor prefixes?

•

fallbacks? jQuery’s .animate()?

•

transforms on older browsers: cssSandpaper

•

performance (especially on mobile)
•

test test test!

•

use transforms instead of top/left/margin
Mastering CSS Animations
considerations
•

does the animation distract from the information it
should be supporting?

•

does your solution work on *any* device?

•

what’s the worst case scenario?
must read
•

http://www.sitepoint.com/advanced-css3-2d-and-3d-transformtechniques/

•

http://learn.shayhowe.com/advanced-html-css/css-transforms

•

http://learn.shayhowe.com/advanced-html-css/transitions-animations

•

http://css3.bradshawenterprises.com/transitions/

•

http://www.kirupa.com/html5/css3_animations_vs_transitions.htm

•

Bonus inspiration: http://uxrave.com/

Mais conteúdo relacionado

Mais procurados

I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not FlashThomas Fuchs
 
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricksincidentist
 
CSS3 Implementable Features
CSS3 Implementable FeaturesCSS3 Implementable Features
CSS3 Implementable FeaturesEstelle Weyl
 
CSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp PresentationCSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp PresentationEstelle Weyl
 
Randomising css animations
Randomising css animationsRandomising css animations
Randomising css animationsasjb
 
Open Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesOpen Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesEstelle Weyl
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleEstelle Weyl
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 CanvasMindy McAdams
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicAkila Iroshan
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Alexandra Lo Cascio
 
HTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleHTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleChris Mills
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventRobert Nyman
 

Mais procurados (20)

I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
Canvas
CanvasCanvas
Canvas
 
PreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 TricksPreDevCampSF - CSS3 Tricks
PreDevCampSF - CSS3 Tricks
 
CSS3 Implementable Features
CSS3 Implementable FeaturesCSS3 Implementable Features
CSS3 Implementable Features
 
CSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp PresentationCSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp Presentation
 
Svg
SvgSvg
Svg
 
Randomising css animations
Randomising css animationsRandomising css animations
Randomising css animations
 
Open Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable FeaturesOpen Web Camp: CSS3 Implementable Features
Open Web Camp: CSS3 Implementable Features
 
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at GoogleWeb Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
 
Css3
Css3Css3
Css3
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
Angular animate
Angular animateAngular animate
Angular animate
 
Html5 SVG
Html5 SVGHtml5 SVG
Html5 SVG
 
SVG - Scalable Vector Graphic
SVG - Scalable Vector GraphicSVG - Scalable Vector Graphic
SVG - Scalable Vector Graphic
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Douban pulse
Douban pulseDouban pulse
Douban pulse
 
Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?Web Design Trends 2010 - What Is CSS3 All About?
Web Design Trends 2010 - What Is CSS3 All About?
 
Html5
Html5Html5
Html5
 
HTML5 and CSS3 Shizzle
HTML5 and CSS3 ShizzleHTML5 and CSS3 Shizzle
HTML5 and CSS3 Shizzle
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
 

Semelhante a Mastering CSS Animations

Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]David Wesst
 
CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)창석 한
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Anna Migas
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform wellAnna Migas
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Gil Fink
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Codemotion
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well Anna Migas
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSSJenn Lukas
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)Chris Mills
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
 
MTA managing the graphical interface by using css
MTA managing the graphical interface by using cssMTA managing the graphical interface by using css
MTA managing the graphical interface by using cssDhairya Joshi
 
The Future of HTML Motion Design
The Future of HTML Motion DesignThe Future of HTML Motion Design
The Future of HTML Motion DesignTerry Ryan
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondAndy Stratton
 
Sachin Foujdar , BCA Third Year
Sachin Foujdar , BCA Third YearSachin Foujdar , BCA Third Year
Sachin Foujdar , BCA Third YearDezyneecole
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive GraphicsBlazing Cloud
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersOswald Campesato
 

Semelhante a Mastering CSS Animations (20)

Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
 
CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)CSS3 TTA (Transform Transition Animation)
CSS3 TTA (Transform Transition Animation)
 
Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017 Make Your Animations Perform Well - JS Conf Budapest 2017
Make Your Animations Perform Well - JS Conf Budapest 2017
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
Make your animations perform well
Make your animations perform wellMake your animations perform well
Make your animations perform well
 
Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3Designing Your Next Generation Web Pages with CSS3
Designing Your Next Generation Web Pages with CSS3
 
Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017Make your animations perform well - Anna Migas - Codemotion Rome 2017
Make your animations perform well - Anna Migas - Codemotion Rome 2017
 
Iagc2
Iagc2Iagc2
Iagc2
 
HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well HalfStack London - Make Your Animations Perform Well
HalfStack London - Make Your Animations Perform Well
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSS
 
The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)The web standards gentleman: a matter of (evolving) standards)
The web standards gentleman: a matter of (evolving) standards)
 
Before Going Vector
Before Going VectorBefore Going Vector
Before Going Vector
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
MTA managing the graphical interface by using css
MTA managing the graphical interface by using cssMTA managing the graphical interface by using css
MTA managing the graphical interface by using css
 
The Future of HTML Motion Design
The Future of HTML Motion DesignThe Future of HTML Motion Design
The Future of HTML Motion Design
 
Trendsetting: Web Design and Beyond
Trendsetting: Web Design and BeyondTrendsetting: Web Design and Beyond
Trendsetting: Web Design and Beyond
 
Sachin Foujdar , BCA Third Year
Sachin Foujdar , BCA Third YearSachin Foujdar , BCA Third Year
Sachin Foujdar , BCA Third Year
 
Interactive Graphics
Interactive GraphicsInteractive Graphics
Interactive Graphics
 
SVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for BeginnersSVG, CSS3, and D3 for Beginners
SVG, CSS3, and D3 for Beginners
 

Último

EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 

Último (20)

EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 

Mastering CSS Animations