|
|
|
## CSS Animations
|
|
|
|
|
|
|
|
A lot can be done with CSS animations.
|
|
|
|
|
|
|
|
### Card Attributes & Changes
|
|
|
|
|
|
|
|
Cards have their main, secondary, and background properties exposed as HTML attributes on the card. They also have their types, title, ciid, location, location-type, position, posX, and dulstclass there as well. These properties can also be used to target cards in CSS and animate them.
|
|
|
|
|
|
|
|
EX:
|
|
|
|
|
|
|
|
```
|
|
|
|
#c-189.card(data-type='unit', data-title='Mouse', data-ciid='189', data-location='me-hand', data-position='facedown', data-dulstclass='Mammal Rodent', data-name='Mouse', data-posx='1', data-elusive='1', data-cost='0', data-atk='1', data-health='1', style='z-index: 203; display: block; left: 432px; top: 540px; height: 102px; width: 82.2581px;', data-eligibletoplay='1')
|
|
|
|
.card-inner
|
|
|
|
img.mediaContent.media-content(src='https://d2t4fc8ff77neh.cloudfront.net/generatedImage/1cd9g9acl_6398596.jpg')
|
|
|
|
.properties
|
|
|
|
.property.mainProperty.main-property(data-name='cost', data-value='0')
|
|
|
|
.data 0
|
|
|
|
.property.mainProperty.main-property(data-name='atk', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.mainProperty.main-property(data-name='health', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.secondaryProperty(data-name='elusive', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.backgroundProperty(data-name='posX', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.location(data-name='location') hand
|
|
|
|
.property.name(data-name='name') Mouse
|
|
|
|
.property.backgroundProperty(data-name='eligibleToPlay', data-value='1')
|
|
|
|
.data 1
|
|
|
|
```
|
|
|
|
|
|
|
|
### Changes to cards
|
|
|
|
|
|
|
|
When the property values change, or is added, or is removed, there is a special `change-`/`add-`/`remove-` attribute created for 4 seconds. After 4 seconds the special attribute is removed.
|
|
|
|
|
|
|
|
EX: Here is the same card immediately after it's been played onto the board.
|
|
|
|
|
|
|
|
```
|
|
|
|
#c-192.card(data-type='unit', data-title='Mouse', data-ciid='192', data-location='me-board', data-position='faceup', data-dulstclass='Mammal Rodent', data-name='Mouse', data-posx='0', data-elusive='1', data-eligibletoplay='1', data-cost='0', data-atk='1', data-health='1', style='z-index: 202; display: block; left: 383.371px; top: 312px; height: 102px; width: 82.2581px;', change-data-location='board', change-data-position='faceup', change-data-posx='0', data-summoningsickness='1', add-data-summoningsickness='1', data-eligibletoattack='0', add-data-eligibletoattack='0')
|
|
|
|
.card-inner(style='transform-origin: 50% 50%; transform: scale(1) rotateY(0deg) rotateX(0deg);')
|
|
|
|
img.mediaContent.media-content(src='https://d2t4fc8ff77neh.cloudfront.net/generatedImage/1cd9g9acl_6398596.jpg')
|
|
|
|
.properties
|
|
|
|
.property.mainProperty.main-property(data-name='cost', data-value='0')
|
|
|
|
.data 0
|
|
|
|
.property.mainProperty.main-property(data-name='atk', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.mainProperty.main-property(data-name='health', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.secondaryProperty(data-name='elusive', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.backgroundProperty(data-name='eligibleToPlay', data-value='1')
|
|
|
|
.data 1
|
|
|
|
.property.location(data-name='location') board
|
|
|
|
.property.name(data-name='name') Mouse
|
|
|
|
.property.backgroundProperty(data-name='summoningSickness', data-value='1')
|
|
|
|
.data 1
|
|
|
|
```
|
|
|
|
|
|
|
|
There is now a `change-data-location='board'` attribute, signifying the move from the hand to the board, a `add-data-summoningsickness='1'` attribute, a `add-data-eligibletoattack='0'` attribute. These can all be used to select for CSS animations. Especially helpful for tying into entry and exit animations. |
|
|
|
\ No newline at end of file |
