Philly.NET Code Camp 2014.1

Jun 22, 2014Download as ODP, PDF0 likes404 views

This document introduces CSS3 transitions, transformations, animations and filters. It provides examples of transition properties, timing functions, transformation functions like translate, scale, rotate and matrix, how to define CSS animations with keyframes, and a list of supported filter functions. Browser support for these features includes Firefox 5+, IE 10+, Chrome, Safari 4+ and Opera 12+. References for further reading on these topics are also provided.

Introduction to CSS3 Animations
and Transitions
Philly.Net CC 2014.1
Sunday June 21, 2014
Mike Melusky
@mrjavascript

Transitions
.example {
transition: [transition-property] [transition-
duration] [transition-timing-function]
[transition-delay];
}

Timing Functions
● Ease
● Linear
● Ease-in
● Ease-out
● Ease-in-out
● cubic-bezier(n,n,n,n)

Transformation
div {
transform: transform-function || none; /*
can list multiple, space-separated */
}
●

Transformation● transform: none
● transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
● transform: translate(12px, 50%)
● transform: translateX(2em)
● transform: translateY(3in)
● transform: scale(2, 0.5)
● transform: scaleX(2)
● transform: scaleY(0.5)
● transform: rotate(0.5turn)
● transform: skewX(30deg)
● transform: skewY(1.07rad)
● transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
● transform: translate3d(12px, 50%, 3em)
● transform: translateZ(2px)
● transform: scale3d(2.5, 1.2, 0.3)
● transform: scaleZ(0.3)
● transform: rotate3d(1, 2.0, 3.0, 10deg)
● transform: rotateX(10deg)
● transform: rotateY(10deg)
● transform: rotateZ(10deg)
● transform: perspective(17px)
● transform: translateX(10px) rotate(10deg) translateY(5px)

Animations
@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+ */
}
●
●
Browser Support
●
Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

Filters
.filter-me {
filter: <filter-function> [<filter-function>]* |
none
}

Filter Functions
●
blur()
● brightness()
●
contrast()
●
url()
●
drop-shadow()
● grayscale()
●
hue-rotate()
●
invert()
●
opacity()
● sepia()
●
custom() - "coming soon"

References
● http://css-tricks.com/
● http://www.w3schools.com/
● http://alistapart.com/

This document provides an overview of CSS transitions, transforms, and animation. It discusses how to create smooth transitions between states using CSS transition properties like duration, timing function, and delay. It also covers 2D and 3D transforms using properties like translate, rotate, scale, and perspective to move, resize, and manipulate elements. Finally, it introduces CSS keyframe animation for defining animation sequences with multiple states called keyframes.

CSS3 TTA (Transform Transition Animation)창석 한

This document provides information about CSS3 transforms, transitions, and animations. It discusses transform properties and functions for moving, scaling, rotating, and styling elements. It explains the transform rendering model and 3D transforms. It also covers transition properties, functions, and events for animating property changes. Finally, it discusses CSS animations using @keyframes to define animations and properties for controlling animation playback.

SVGD3Angular2ReactOswald Campesato

The document discusses features of SVG and D3, including different SVG elements, colors/gradients/filters, transforms and animation, and how D3 builds upon SVG to enable data visualization. It provides examples of creating basic SVG shapes and charts with D3, binding data to DOM elements, adding mouse interactions and transitions. It also covers using D3 with other technologies like Angular, working with different data formats and large datasets, and transpires for working with modern JavaScript.

Matlab robotics toolboxRajesh Raveendran

This document provides an overview of the MATLAB Robotics Toolbox. It describes that the toolbox contains functions for studying robot kinematics, dynamics, trajectory generation, visualization and simulation for arm-type robots. It also contains functions for mobile robots and computer vision. The document provides instructions on how to download, install and use the toolbox to define robots, perform forward and inverse kinematics, calculate Jacobians and trajectories, and simulate robot dynamics.

CSS Animations & TransitionsEdward Meehan

This document summarizes CSS transitions and animations. Transitions allow gradual changes between states, like color changes on hover. Animations define multiple keyframes to transition between over time. Both require setting a property, duration and can be controlled with JavaScript events. Transitions are simpler but animations can define complex multi-step changes. For performance, animating with transforms like translate is preferable to top/right/bottom/left since it uses the GPU.

CSS/SVG Matrix TransformsMarc Grabanski

Container Orchestration for .NET DevelopersMike Melusky

Containerize all the things!Mike Melusky

This document summarizes a presentation on containerizing applications and deploying them to cloud platforms. It discusses Docker containers and containerization as a way to package applications. It then covers deploying .NET Core applications in Docker containers and pushing the images to cloud container registries on platforms like AWS ECS and Azure Container Instances. Finally, it demonstrates containerizing other applications built with technologies like Java Spring Boot, Python Flask, and JavaScript React.

Building a Google Cloud Firestore API with dotnet coreMike Melusky

The document provides an overview of building a .NET Core API to integrate with Google Cloud Firestore. It discusses moving from a two-tier architecture with the frontend directly accessing Firestore, to a three-tier architecture with a middle API tier. This improves scalability, maintainability and allows other clients beyond the web frontend. The speaker demonstrates creating the Firestore database, building the .NET Core API using the Firestore SDK, and updating the React frontend to call the new API instead of the Firestore JavaScript API directly.

Effective .NET Core Unit Testing with SQLite and DapperMike Melusky

- The document discusses effective unit testing for .NET Core applications that use SQLite and Dapper for data access. - It motivates the importance of unit testing, then demonstrates how to set up an in-memory SQLite database to run tests against instead of a live SQL Server database for isolation. - Best practices like test-driven development, code coverage reports, and writing tests for bug fixes are also covered, with examples shown of integrating the XUnit testing framework.

Effective .NET Core Unit Testing with SQLite and DapperMike Melusky

- The document discusses effective unit testing for .NET Core applications that use SQLite and Dapper for data access. - It motivates the importance of unit testing, describes best practices like test-driven development, and demonstrates setting up an in-memory SQLite database for unit tests along with sample test cases using Xunit. - The presentation was given to the Philly.NET user group and includes code examples for integrating unit testing into an existing .NET Core/C# project that connects to SQL Server for data storage.

Reactive Web Development with Spring Boot 2Mike Melusky

Building xamarin.forms apps with prism and mvvmMike Melusky

This document summarizes a presentation about building Xamarin.Forms apps with Prism and MVVM. The presentation covered introducting Xamarin.Forms, creating a basic app, .NET Standard, core concepts like XAML and navigation, introducing the MVVM pattern and Prism framework, and additional topics like SQLite, authentication, and testing. It demonstrated building a simple app, integrating Prism and dependency injection, and using MVVM patterns like commands and data binding.

Introduction to react native with reduxMike Melusky

This document provides an introduction and overview of React Native with Redux. It begins with an introduction to React components, props, and state. It then covers building a sample React Native app and advanced concepts like navigation and Redux. The document compares React Native to other native frameworks and provides resources for learning more. It was presented at Philly.NET on March 24, 2018 and discusses topics like React basics, React Native, native navigation solutions, and integrating Redux.

Xamarin.Forms BootcampMike Melusky

This document provides an overview of a one-day Xamarin bootcamp workshop on cross-platform mobile app development using Xamarin. The workshop will cover topics such as introducing Xamarin and Xamarin.Forms, building a sample application, integrating with RESTful APIs, authentication, and software engineering practices for mobile development. It will be led by speaker Michael Melusky and include hands-on coding exercises.

An evening with React NativeMike Melusky

Progressive Web Apps and ReactMike Melusky

The document discusses progressive web apps and React. It begins by introducing progressive web apps and their benefits over traditional web apps and native apps. It then covers prerequisites for building progressive web apps with React including HTML, JavaScript, Node.js and CLI knowledge. The document proceeds to discuss key React topics like components, virtual DOM, JSX, props and state. It also covers service workers, manifest files and tools for testing progressive web apps.

Into to Docker (Central PA Java User Group - 8/14/2017)Mike Melusky

This document provides an introduction to Docker, including what Docker is, how it differs from virtual machines, basic Docker commands, examples of running common applications like GitLab and JIRA in Docker containers, and considerations for when to use and not use Docker. Docker allows containerized execution of isolated applications, sharing resources for lighter weight usage than virtual machines. Examples demonstrate pulling public images and running containers from them to execute applications like Python, GitLab and JIRA.

An afternoon with angular 2Mike Melusky

This document summarizes a presentation about Angular 2 given by Michael Melusky. The presentation covered introductions to Angular 2, TypeScript, components, data binding, communication between components, routing, directives, pipes, services, and integrating Firebase. It provided overviews and examples of key Angular 2 concepts like components, data binding, dependency injection, and services. It also explained how to set up an Angular 2 project using the Angular CLI and TypeScript basics.

An evening with Angular 2Mike Melusky

This document summarizes a presentation about Angular 2 given by Michael Melusky. The presentation covered introductions to Angular 2, TypeScript, components, data binding, communication between components, routing, directives, pipes and filters, services, and Firebase integration. It provided examples of TypeScript code, Angular components, data binding syntax, using directives like ngIf and ngFor, and creating services to avoid duplicating code between components. The speaker's goal was to give an overview of the core aspects of building applications with Angular 2.

Securing your azure web app with asp.net core data protectionMike Melusky

This document summarizes securing an ASP.NET Core web application with data protection. It begins with an overview of encryption in ASP.NET prior to Core and introduces the new Data Protector framework. Through demos, it shows how to build an MVC app, encrypt data using the framework, and deploy the application to Azure with an SSL certificate from Let's Encrypt. It discusses key features of the framework like key management, lifetime, and algorithms. The document provides guidance on configuration and deployment considerations for data protection in ASP.NET Core.

Ember.js and .NET IntegrationMike Melusky

Building Native “apps” with Visual Studio 2015Mike Melusky

This document summarizes options for building native mobile applications using Visual Studio 2015. It discusses tools for developing apps for platforms like iOS, Android, and Windows Phone. Key frameworks mentioned include Apache Cordova, which allows developing mobile apps using web technologies, and Xamarin, which enables sharing code across platforms while creating fully native apps. The document also includes a demo of creating a basic app using Apache Cordova and discusses advantages and limitations of various approaches.

Emberjs and ASP.NETMike Melusky

This document summarizes a presentation about Emberjs and its components. Emberjs is a framework for creating ambitious web applications that uses templates, components, controllers, models, routes and a router. Templates define the user interface using Handlebars, components organize the UI and define behaviors, controllers are similar to components, models represent persistent data, routes load controllers/templates/models, and the router maps URLs to routes. The presentation demonstrates creating an Emberjs app and some of its key concepts like objects, enumerables and the object model. It also discusses why one may choose Emberjs over Angular and the roadmap to move away from controllers to components.

Fun with lambda expressionsMike Melusky

This document provides an overview and introduction to lambda expressions. It discusses lambda expressions in .NET and C#, how they originated from lambda calculus, and how they allow functions to be passed around like data. It provides examples of using lambda expressions with LINQ, delegates, and expression trees in C#. It also compares how lambda expressions are implemented in Java SE 8 versus C# and .NET. The goal is to help developers understand what lambda expressions are, how they differ from anonymous methods, and how to use them in various programming languages and contexts.

An evening with querydslMike Melusky

The document discusses Querydsl, an open source query framework for Java that generates type-safe queries across multiple platforms including JPA, JDO, JDBC, Lucene, Hibernate Search, MongoDB, and Collections. It allows domain changes to be reflected in queries, provides autocomplete for faster and safer query construction, and avoids issues with string concatenation and unsafe references present in alternative approaches like HQL. An example application using Querydsl with a Bookstore data model is presented to demonstrate its features.

"Client Partnership — the Path to Exponential Growth for Companies Sized 50-5...Fwdays

Asthma presentación en inglés abril 2025 pdfVanessaRaudez

More Related Content

More from Mike Melusky (20)

Container Orchestration for .NET DevelopersMike Melusky

Containerize all the things!Mike Melusky

Building a Google Cloud Firestore API with dotnet coreMike Melusky

Effective .NET Core Unit Testing with SQLite and DapperMike Melusky

Reactive Web Development with Spring Boot 2Mike Melusky

Building xamarin.forms apps with prism and mvvmMike Melusky

Introduction to react native with reduxMike Melusky

Xamarin.Forms BootcampMike Melusky

An evening with React NativeMike Melusky

Progressive Web Apps and ReactMike Melusky

Into to Docker (Central PA Java User Group - 8/14/2017)Mike Melusky

An afternoon with angular 2Mike Melusky

An evening with Angular 2Mike Melusky

This document summarizes a presentation about Angular 2 given by Michael Melusky. The presentation covered introductions to Angular 2, TypeScript, components, data binding, communication between components, routing, directives, pipes and filters, services, and Firebase integration. It provided examples of TypeScript code, Angular components, data binding syntax, using directives like ngIf and ngFor, and creating services to avoid duplicating code between components. The speaker's goal was to give an overview of the core aspects of building applications with Angular 2.

Securing your azure web app with asp.net core data protectionMike Melusky

Ember.js and .NET IntegrationMike Melusky

Building Native “apps” with Visual Studio 2015Mike Melusky

Emberjs and ASP.NETMike Melusky

Fun with lambda expressionsMike Melusky

An evening with querydslMike Melusky

Container Orchestration for .NET DevelopersMike Melusky

Containerize all the things!Mike Melusky

Building a Google Cloud Firestore API with dotnet coreMike Melusky

Effective .NET Core Unit Testing with SQLite and DapperMike Melusky

Reactive Web Development with Spring Boot 2Mike Melusky

Building xamarin.forms apps with prism and mvvmMike Melusky

Introduction to react native with reduxMike Melusky

Xamarin.Forms BootcampMike Melusky

An evening with React NativeMike Melusky

Progressive Web Apps and ReactMike Melusky

Into to Docker (Central PA Java User Group - 8/14/2017)Mike Melusky

An afternoon with angular 2Mike Melusky

An evening with Angular 2Mike Melusky

Securing your azure web app with asp.net core data protectionMike Melusky

Ember.js and .NET IntegrationMike Melusky

Building Native “apps” with Visual Studio 2015Mike Melusky

Emberjs and ASP.NETMike Melusky

Fun with lambda expressionsMike Melusky

An evening with querydslMike Melusky

Recently uploaded (20)

"Client Partnership — the Path to Exponential Growth for Companies Sized 50-5...Fwdays

Asthma presentación en inglés abril 2025 pdfVanessaRaudez

Cyber Awareness overview for 2025 month of securityriccardosl1

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Rock, Paper, Scissors: An Apex Map Learning JourneyLynda Kane

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Network Security. Different aspects of Network Security.gregtap1

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Datastucture-Unit 4-Linked List Presentation.pptxkaleeswaric3

"Client Partnership — the Path to Exponential Growth for Companies Sized 50-5...Fwdays

Asthma presentación en inglés abril 2025 pdfVanessaRaudez

Cyber Awareness overview for 2025 month of securityriccardosl1

Mobile App Development Company in Saudi ArabiaSteve Jonas

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Rock, Paper, Scissors: An Apex Map Learning JourneyLynda Kane

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

How Can I use the AI Hype in my Business Context?Daniel Lehner

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Network Security. Different aspects of Network Security.gregtap1

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Datastucture-Unit 4-Linked List Presentation.pptxkaleeswaric3

Philly.NET Code Camp 2014.1

1. Introduction to CSS3 Animations and Transitions Philly.Net CC 2014.1 Sunday June 21, 2014 Mike Melusky @mrjavascript

2. Transitions .example { transition: [transition-property] [transition- duration] [transition-timing-function] [transition-delay]; }

3. Transitions

4. Timing Functions ● Ease ● Linear ● Ease-in ● Ease-out ● Ease-in-out ● cubic-bezier(n,n,n,n)

5. Transformation div { transform: transform-function || none; /* can list multiple, space-separated */ } ●

6. Transformation● transform: none ● transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) ● transform: translate(12px, 50%) ● transform: translateX(2em) ● transform: translateY(3in) ● transform: scale(2, 0.5) ● transform: scaleX(2) ● transform: scaleY(0.5) ● transform: rotate(0.5turn) ● transform: skewX(30deg) ● transform: skewY(1.07rad) ● transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) ● transform: translate3d(12px, 50%, 3em) ● transform: translateZ(2px) ● transform: scale3d(2.5, 1.2, 0.3) ● transform: scaleZ(0.3) ● transform: rotate3d(1, 2.0, 3.0, 10deg) ● transform: rotateX(10deg) ● transform: rotateY(10deg) ● transform: rotateZ(10deg) ● transform: perspective(17px) ● transform: translateX(10px) rotate(10deg) translateY(5px)

7. Transformation

8. Animations @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } #box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+ */ } ● ● Browser Support ● Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

9. Filters .filter-me { filter: <filter-function> [<filter-function>]* | none }

10. Filter Functions ● blur() ● brightness() ● contrast() ● url() ● drop-shadow() ● grayscale() ● hue-rotate() ● invert() ● opacity() ● sepia() ● custom() - "coming soon"

11. Filters

12. References ● http://css-tricks.com/ ● http://www.w3schools.com/ ● http://alistapart.com/

Philly.NET Code Camp 2014.1

Recommended

More Related Content

More from Mike Melusky (20)

Recently uploaded (20)

Philly.NET Code Camp 2014.1