From 00e2420193a68ccf014078fa06e1c0f101575727 Mon Sep 17 00:00:00 2001
From: Chipp Chirp <32373017+chippyho123@users.noreply.github.com>
Date: Fri, 4 Oct 2019 15:12:03 -0400
Subject: [PATCH] Add files via upload

---
 transitions.org | 58 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 transitions.org

diff --git a/transitions.org b/transitions.org
new file mode 100644
index 0000000..7bc90bb
--- /dev/null
+++ b/transitions.org
@@ -0,0 +1,58 @@
+CSS transitions allows you to change property values smoothly, over a given duration.
+
+
+Some older browsers need specific prefixes (-webkit-) to understand the transition properties:
+
+div {
+  width: 100px;
+  height: 100px;
+  background: red;
+  -webkit-transition: width 2s; /* Safari prior 6.1 */
+  transition: width 2s;
+}
+
+Using transitions:
+
+Specify property to affect and how long transition lasts
+
+div {
+  width: 100px;
+  height: 100px;
+  background: red;
+  transition: width 2s;
+}
+
+
+transition
+
+	basic (can put everything in this one)
+
+transition-delay
+
+	specifies delay in seconds for transition
+
+transition-duration
+
+	specifies duration for transition
+
+transition-property
+
+	specifies property to change for transition
+
+transition-timing-function
+
+	With this you can also specify speed curves/easing:
+
+	ease - transition effect with a slow start, then fast, then end slowly (this is default)
+	linear - transition effect with the same speed from start to end
+	ease-in - transition effect with a slow start
+	ease-out - transition effect with a slow end
+	ease-in-out - transition effect with a slow start and end
+
+	Examples:
+
+	{transition-timing-function: linear;}
+	{transition-timing-function: ease;}
+	{transition-timing-function: ease-in;}
+	{transition-timing-function: ease-out;}
+	{transition-timing-function: ease-in-out;}