openhabforum.de

Code: Alles auswählen

- component: Label
                        config:
                           class: ="arrow"
                           stylesheet: >
                             .arrow{
                                  position: absolute;
                                  top: 50%;
                                  left: 50%;
                                  transform: translate(-50%,-50%);
                              }
                              .arrow span{
                                  display: block;
                                  width: 20px;
                                  height: 20px;
                                  border-bottom: 5px solid #000;
                                  border-right: 5px solid #000;
                                  transform: rotate(135deg);
                                  margin: -25px;
                                  animation: animate 2s infinite;
                              }
                              .arrow span:nth-child(2){
                                  animation-delay: -0.2s;
                              }
                              .arrow span:nth-child(3){
                                  animation-delay: -0.4s;
                              }
                              @keyframes animate {
                                  0%{
                                      opacity: 0;
                                      transform: rotate(135deg) translate(-20px,-20px);
                                  }
                                  50%{
                                      opacity: 1;
                                  }
                                  100%{
                                      opacity: 0;
                                      transform: rotate(135deg) translate(20px,20px);
                                  }
                              }