Skip to content

GitLab

Last edited by Kaoru Aoi
Page history
This is an old version of this page. You can view the most recent version or browse the history.

Animations

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.