Mcsd 70-480 4.4-4.5 Create An Animated And Adaptive Ui

Front 1

define keyframes with from-to

Back 1

@keyframes myAnimation { from { background: white; } to { background: black; } }

Front 2

define keyframes with percentage

Back 2

@keyframes myAnimation { 0% { background: white; } 10% { background: red; } 25% { background: yellow; } 50% { background: blue; } 100% { background: black; } }

Front 3

use animation property to trigger the animation

Back 3

#animElement { animation: myAnimation 2s; }

Front 4

css style media query that only applies if device is n or less

Back 4

@media (max-width: 600px) { #header { display: none; } } // n being 600px;

Front 5

common non-device media queries

Back 5

min-device-height,max-device-height,min-device-width,max-device-width,min-height,max-height,min-width,max-width,orientation,min-resolution, max-resolution

Front 6

media specific types

Back 6

all, aural, braille, handheld, print, projection, screen, tty, tv, embossed

Front 7

css style media query for between n and n

Back 7

@media screen and (min-width: 500px) and (max-width: 900px) { … }

Front 8

disable control with jquery

Back 8

$("#myInput").prop("disabled", true);

Front 9

select all of an element type with jquery

Back 9

$(“p”);