# data[].attributes.attachment_link.readable_text
The animation property in CSS can be used to animate many other CSS properties such as , background-color, , or . Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so:

.element { animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; } }

See the Pen A simple animation by CSS-Tricks (@css-tricks) on CodePen.

Each @keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated.

Sub-properties

animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-timing-function: establishes preset acceleration curves such as ease or linear.

animation-delay: the time between the element being loaded and the start of the animation sequence.

animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.

animation-iteration-count: the number of times the animation should be performed.

animation-fill-mode: sets which values are applied before/after the animation.
For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.

animation-play-state: pause/play the animation.

These sub-properties can then be used like so:

@keyframes stretch { /* declare animation actions here */ } .element { animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; } /* is the same as: */ .element { animation: stretch 1.5s ease-out 0s alternate infinite none running; }

See the Pen EjaJNd by CSS-Tricks (@css-tricks) on CodePen.

Here's a full list of which values each of these sub-properties can take:

Multiple steps

If an animation has the same starting and ending properties, it's useful to comma-separate the 0% and 100% values inside @keyframes:

@keyframes pulse { 0%, 100% { background-color: yellow; } 50% { background-color: red; } }

Multiple animations

You can comma-separate the values to declare multiple animations on a selector as well. In the example below, we want to change the color of the circle in a @keyframe whilst also nudging it from side to side with another.

.element { animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; }

See the Pen c6d27fda8e1244d44bf04728049d7c1d by CSS-Tricks (@css-tricks) on CodePen.

Performance

Animating most properties is a performance concern, so we should proceed with caution before animating any property. However, there are certain combinations that can be animated safely:

Which properties can be animated?

MDN has a list of CSS properties which can be animated. Animatable properties tend to colors and numbers. An example a non-animatable property is background-image.

More information

Browser support

Prefixes

Although browser support is quite good for this property in modern browsers, we might want to support as many older browsers as we can. In that case we'd need to use vendor prefixes:

.element { -webkit-animation: KEYFRAME-NAME 5s infinite; -moz-animation: KEYFRAME-NAME 5s infinite; -o-animation: KEYFRAME-NAME 5s infinite; animation: KEYFRAME-NAME 5s infinite; } @-webkit-keyframes KEYFRAME-NAME { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes KEYFRAME-NAME { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes KEYFRAME-NAME { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes KEYFRAME-NAME { 0% { opacity: 0; } 100% { opacity: 1; } }

# data[].attributes.attachment_link.description
The animation property in CSS can be used to animate many other CSS properties such as , background-color , , or . Each animation needs to be defined with the @keyframes at-rule which is then called with the animation property, like so: .element { animation: pulse 5s infinite; } @keyframes pulse { 0% { background-color: #001F3F; } 100% { background-color: #FF4136; } } See the Pen A simple animation by CSS-Tricks (@css-tricks) on CodePen.

# data[].attributes.body
img{
text-align: center;
}

# data[].attributes.body
float:left;

# data[].attributes.body
border: 1px solid #0000;

1px = dikte
solid = dashed, solid, double, grouve...
#0000 = kleurcode

https://www.w3schools.com/css/css_border.asp

# data[].attributes.body
font-weight: bold;bold, normal, light
of: 100,200,300,400.,500..

# data[].attributes.body
text-align: left;

left, center of right

# data[].attributes.body
height: 100px;

Lees ook: Eenheiden in CSS

# data[].attributes.body
width: 100px;

Lees ook: Eenheiden in CSS

# data[].attributes.attachment_link.title
Een zelfgekozen lettertype gebruiken in CSS

# data[].attributes.attachment_link.description
Uploaded by Rick Hazebroek on 2014-06-12.

# data[].attributes.body
font-family, font-size, color...

# data[].attributes.attachment_link.title
CSS: Je website vormgeven / Tekst vormgeven

# data[].attributes.attachment_link.description
Uploaded by Rick Hazebroek on 2015-12-14.

# data[].attributes.body
background-color, padding

# data[].attributes.attachment_link.title
CSS: Je website vormgeven / Achtergrondkleur en witruimte toevoegen

# data[].attributes.body
Met margin voeg je witruimte toe buiten een div (of andere tag).

margin: 5px 10px
20px 30px;

De volgorde is kloksgewijs: margin boven, margin rechts, margin onder en margin links.

# data[].attributes.body
Met padding voeg je witruimte toe binnen een div (of andere tag).

padding: 5px 10px 20px 30px;

De volgorde is klokgewijs: padding boven, padding rechts, padding onder en padding links.

# data[].attributes.body
font-family: Helvetica, arial, serif;

Een serie lettertypes. De eerste wordt gekozen door de browser, tenzij deze niet beschikbaar is, dan kijkt de browser naar het volgende lettertype.
Alleen 'web safe fonts' zijn mogelijk, tenzij je @font-face gebruikt. Zie: "Een zelfgekozen lettertype toevoegen".

https://www.w3schools.com/cssref/css_websafe_fonts.asp

# data[].attributes.body
line-height: 20px;

# data[].attributes.body
font-size: 20px;

# data[].attributes.body
color: #000000;

# data[].attributes.body
In HTML kun je een tag een eigenschap class geven. De waarde is dan de naam die je de tag wilt geven. Met die naam kun je in CSS aan de hand van de class-selector deze tag gaan vormgeven.

Selector: de naam van de class

Eigenschap (property):
hetzelfde als de element selector

Waarde (value):
hetzelfde als de element selector

w3schools.com/css/css_syntax.asp

# data[].attributes.body
Voor breedtes, hoogtes en afstanden kun je in CSS verschillende eenheden gebruiken.

1. px: Pixels
Pixels schrijf je als px, wil je een breedte invoeren van 100 pixels, dan typ je:

100px

2. vw: Viewpoint width
De breedte van het venster van je browser. 1vw is 1/100 van de breedte van je venster. De hele breedte van je scherm is dus:

100vw

3. vh: Viewpoint height
De hoogte van het venster van je browser. 1vw is 1/100 van de hoogte van je venster. De hele hoogte van het venster is dus:

100vh

4. %: Procenten
Procenten kun je gebruiken om voor een achtergrond de breedte of hoogte van het element te gebruiken.

100%

# data[].attributes.body
Achtergrond-vullend

backgrounde-size: cover;

Achtergrond aanpassen aan de breedte:

backgrounde-size: 100% auto;

Achtergrond aanpassen aan de hoogte:

backgrounde-size: auto 100%;

# data[].attributes.body
background-repeat:
no-repeat;

Mogelijke waarden:
no-repeat:
geen herhaling

repeat-x:
herhaal horizontaal

repeat-y:
herhaal verticaal

# data[].attributes.body
background-image: url('images/plaatje.jpg');

# data[].attributes.body
background-color: #0000000;

# data[].attributes.body
text-shadow: 2px 2px #ff0000;

# data[].attributes.body
Met een CSS generator kun je een CSSeigenschap visueel ontwerpen, zoals schaduw (box-shadow) of ronde hoeken (border-radius)

# data[].attributes.attachment_link.title
The ultimate CSS tools for web designers | CSSmatic

# data[].attributes.body
border-radius: 10px 10px 10px 10px;

Linksboven - rechtsboven - linksonder - rechtsonder

# data[].attributes.body
box-shadow: 10px 10px 10px rgba(0,0,0,0.75);

10px 10px 10px =
horizontaal, verticaal en spreiding
0,0,0, = RGB code
0.75 = doorzichtbaarheid

# data[].attributes.body
In CSS kun je aan de hand van de afkorting van de tag deze tag gaan vormgeven.

Selector: de afkorting van de tag.

Eigenschap (property): de eigenschap die je wilt wijzigen, bijvoorbeeld de tekstkleur is 'color'.

Waarde (value): de waarde die daar bijhoort, bijvoorbeeld de kleurcode.

w3schools.com/css/css_syntax.asp

# data[].attributes.body
In deze PDF staan allerlei eigenschappen en waarden in die je kunt gebruiken. De meesten staan ook op deze pagina.

Meer variatie?
Er zijn op het internet nog meer spiekbriefjes te vinden, Google op "CSS cheatsheet" en vind je eigen.

# data[].attributes.body
Plaats de link naar je CSS-bestand in je head-tag:

<link rel="stylesheet" href="vormgeving.css">