API tools faq
paste
Advertisement
pqpxoxa

HA - custom:button-card' Animations

pqpxoxa
Sep 14th, 2020
3,117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.71 KB | None | 0 0
raw download clone embed print report
  1. cards:
  2. - content: |
  3. # Card Animation Tests
  4. style:
  5. .: |
  6. ha-card {
  7. background-color: transparent !important;
  8. box-shadow: none !important;
  9. }
  10. ha-markdown:
  11. $: |
  12. h1 {
  13. font-size: 25px;
  14. font-weight: bold;
  15. text-align: center;
  16. letter-spacing: '-0.01em';
  17. }
  18. type: markdown
  19. - cards:
  20. - color_type: blank-card
  21. icon: 'mdi:led-strip-variant'
  22. name: Floor
  23. styles:
  24. card:
  25. - width: 25px
  26. type: 'custom:button-card'
  27. - entity: binary_sensor.openclose_19
  28. extra_styles: |
  29. @keyframes bounce {
  30. 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  31. 40% { transform: translateY(-25px); }
  32. 60% { transform: translateY(-15px); }
  33. }
  34. icon: 'mdi:doorbell'
  35. name: Back
  36. state:
  37. - icon: 'mdi:door-closed'
  38. styles:
  39. card: null
  40. icon:
  41. - width: 45%
  42. - opacity: 0.5
  43. - padding-top: 10px
  44. name:
  45. - padding: 10px
  46. - font-size: 12px
  47. - text-overflow: unset
  48. - white-space: unset
  49. - word-break: break-word
  50. value: 'off'
  51. - color: white
  52. icon: 'mdi:door-open'
  53. operator: default
  54. styles:
  55. card:
  56. - animation: bounce 1s infinite
  57. icon:
  58. - width: 45%
  59. - padding-top: 10px
  60. name:
  61. - padding: 10px
  62. - font-weight: bold
  63. - font-size: 12px
  64. - text-overflow: unset
  65. - white-space: unset
  66. - word-break: break-word
  67. type: 'custom:button-card'
  68. - entity: binary_sensor.openclose_19
  69. extra_styles: |
  70. @-webkit-keyframes swing
  71. {
  72. 15%
  73. {
  74. -webkit-transform: translateX(5px);
  75. transform: translateX(5px);
  76. }
  77. 30%
  78. {
  79. -webkit-transform: translateX(-5px);
  80. transform: translateX(-5px);
  81. }
  82. 50%
  83. {
  84. -webkit-transform: translateX(3px);
  85. transform: translateX(3px);
  86. }
  87. 65%
  88. {
  89. -webkit-transform: translateX(-3px);
  90. transform: translateX(-3px);
  91. }
  92. 80%
  93. {
  94. -webkit-transform: translateX(2px);
  95. transform: translateX(2px);
  96. }
  97. 100%
  98. {
  99. -webkit-transform: translateX(0);
  100. transform: translateX(0);
  101. }
  102. }
  103. icon: 'mdi:doorbell'
  104. name: Back
  105. state:
  106. - icon: 'mdi:door-closed'
  107. styles:
  108. card:
  109. # - height: 80px
  110. icon:
  111. - width: 45%
  112. - opacity: 0.5
  113. - padding-top: 10px
  114. name:
  115. - padding: 10px
  116. - font-size: 12px
  117. - text-overflow: unset
  118. - white-space: unset
  119. - word-break: break-word
  120. value: 'off'
  121. - color: white
  122. icon: 'mdi:door-open'
  123. operator: default
  124. styles:
  125. card:
  126. # - height: 80px
  127. - animation: swing 1s ease infinite
  128. icon:
  129. - width: 45%
  130. - padding-top: 10px
  131. name:
  132. - padding: 10px
  133. - font-weight: bold
  134. - font-size: 12px
  135. - text-overflow: unset
  136. - white-space: unset
  137. - word-break: break-word
  138. type: 'custom:button-card'
  139. - entity: binary_sensor.openclose_19
  140. extra_styles: |
  141. @-webkit-keyframes WidthAni {
  142. 0% {width: 0px}
  143. 10% {width: 100%;left: 0;right: 0}
  144. 20% {width: 5%;left: 95%;}
  145. 25% {width: 5%;left: 95%;}
  146. 35% {width: 100%;left: 0%;}
  147. 45% {width: 0%;}
  148. 100% {width: 0%;}
  149. }
  150. icon: 'mdi:doorbell'
  151. name: Back
  152. state:
  153. - icon: 'mdi:door-closed'
  154. styles:
  155. card:
  156. # - height: 80px
  157. icon:
  158. - width: 45%
  159. - opacity: 0.5
  160. - padding-top: 10px
  161. name:
  162. - padding: 10px
  163. - font-size: 12px
  164. - text-overflow: unset
  165. - white-space: unset
  166. - word-break: break-word
  167. value: 'off'
  168. - color: white
  169. icon: 'mdi:door-open'
  170. operator: default
  171. styles:
  172. card:
  173. # - height: 80px
  174. - animation: WidthAni 5.0s infinite ease-in-out
  175. icon:
  176. - width: 45%
  177. - padding-top: 10px
  178. name:
  179. - padding: 10px
  180. - font-weight: bold
  181. - font-size: 12px
  182. - text-overflow: unset
  183. - white-space: unset
  184. - word-break: break-word
  185. type: 'custom:button-card'
  186. - color_type: blank-card
  187. icon: 'mdi:led-strip-variant'
  188. name: Floor
  189. styles:
  190. card:
  191. - width: 25px
  192. type: 'custom:button-card'
  193. type: horizontal-stack
  194. - cards:
  195. - color_type: blank-card
  196. icon: 'mdi:led-strip-variant'
  197. name: Floor
  198. styles:
  199. card:
  200. - width: 25px
  201. type: 'custom:button-card'
  202. - entity: binary_sensor.openclose_19
  203. extra_styles: |
  204. @keyframes mymove {
  205. 50% {box-shadow: 0 0 20px red;}
  206. }
  207. icon: 'mdi:doorbell'
  208. name: Front
  209. state:
  210. - icon: 'mdi:door-closed'
  211. styles:
  212. card:
  213. # - height: 80px
  214. icon:
  215. - width: 45%
  216. - opacity: 0.5
  217. - padding-top: 10px
  218. name:
  219. - padding: 10px
  220. - font-size: 12px
  221. - text-overflow: unset
  222. - white-space: unset
  223. - word-break: break-word
  224. value: 'off'
  225. - color: white
  226. icon: 'mdi:door-open'
  227. operator: default
  228. styles:
  229. card:
  230. # - height: 80px
  231. - animation: mymove 2s infinite
  232. icon:
  233. - width: 45%
  234. - padding-top: 10px
  235. - color: 'rgba(255, 0, 0, 0.6)'
  236. name:
  237. - padding: 10px
  238. - color: red
  239. - font-weight: bold
  240. - font-size: 12px
  241. - text-overflow: unset
  242. - white-space: unset
  243. - word-break: break-word
  244. type: 'custom:button-card'
  245. - entity: binary_sensor.openclose_19
  246. extra_styles: |
  247. @keyframes pulse {
  248. 0% {
  249. -moz-box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
  250. box-shadow: 0 0 0 0 rgba(255,0,0, 0.7);
  251. }
  252. 70% {
  253. -moz-box-shadow: 0 0 0 10px rrgba(240,52,52, 0.9);
  254. box-shadow: 0 0 0 10px rgba(240,52,52, 0.7);
  255. }
  256. 100% {
  257. -moz-box-shadow: 0 0 0 0 rgba(240,52,52, 0);
  258. box-shadow: 0 0 0 0 rgba(240,52,52, 0);
  259. }
  260. }
  261. icon: 'mdi:doorbell'
  262. name: Back
  263. state:
  264. - icon: 'mdi:door-closed'
  265. styles:
  266. card:
  267. # - height: 80px
  268. icon:
  269. - width: 45%
  270. - opacity: 0.5
  271. - padding-top: 10px
  272. name:
  273. - padding: 10px
  274. - font-size: 12px
  275. - text-overflow: unset
  276. - white-space: unset
  277. - word-break: break-word
  278. value: 'off'
  279. - color: white
  280. icon: 'mdi:door-open'
  281. operator: default
  282. styles:
  283. card:
  284. # - height: 80px
  285. - animation: pulse 1s infinite
  286. icon:
  287. - width: 45%
  288. - padding-top: 10px
  289. - color: red
  290. name:
  291. - padding: 10px
  292. - color: red
  293. - font-weight: bold
  294. - font-size: 12px
  295. - text-overflow: unset
  296. - white-space: unset
  297. - word-break: break-word
  298. type: 'custom:button-card'
  299. - entity: binary_sensor.openclose_19
  300. extra_styles: |
  301. @keyframes ball-scale {
  302. from {
  303. transform: scale(1);
  304. box-shadow: 0 8px 6px -6px #6C7A89;
  305. }
  306. to {
  307. transform: scale(1.25);
  308. box-shadow: 0 10px 6px -6px #6C7A89;
  309. }
  310. }
  311. icon: 'mdi:doorbell'
  312. name: Back
  313. state:
  314. - icon: 'mdi:door-closed'
  315. styles:
  316. card:
  317. # - height: 80px
  318. icon:
  319. - width: 45%
  320. - opacity: 0.5
  321. - padding-top: 10px
  322. name:
  323. - padding: 10px
  324. - font-size: 12px
  325. - text-overflow: unset
  326. - white-space: unset
  327. - word-break: break-word
  328. value: 'off'
  329. - color: white
  330. icon: 'mdi:door-open'
  331. operator: default
  332. styles:
  333. card:
  334. # - height: 80px
  335. - background: blue
  336. - animation: ball-scale 2s ease-in-out infinite
  337. icon:
  338. - width: 45%
  339. - padding-top: 10px
  340. name:
  341. - padding: 10px
  342. - font-weight: bold
  343. - font-size: 12px
  344. - text-overflow: unset
  345. - white-space: unset
  346. - word-break: break-word
  347. type: 'custom:button-card'
  348. - color_type: blank-card
  349. icon: 'mdi:led-strip-variant'
  350. name: Floor
  351. styles:
  352. card:
  353. - width: 25px
  354. type: 'custom:button-card'
  355. type: horizontal-stack
  356. type: vertical-stack
  357.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!