css动画

transition: opacity .7s cubic-bezier(.165,.84,.44,1) var(--reveal-delay),transform .7s cubic-bezier(.165,.84,.44,1) var(--reveal-delay),-webkit-transform .7s cubic-bezier(.165,.84,.44,1) var(--reveal-delay);

transition:rotateX(0deg) rotateY(0deg) rotateZ(0deg);

background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);

background-size:51% 2px,50% 2px;

background-position:0 100%,100% 100%;

animation:underlineSlideIn .5s cubic-bezier(.694,0,.335,1) forwards

.link {
 position:relative;
 border-bottom:none;
 font-family:'Clarkson',Helvetica,sans-serif;
 font-style:normal;
 font-weight:500;
 line-height:1.2em;
 letter-spacing:0;
 text-rendering:geometricPrecision;
 text-transform:uppercase;
 text-decoration:none;
 font-size:16px;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 display:inline-block
}
@media all and (min-width:1280px) {
 .link {
  font-size:18px
 }
}
@media all and (min-width:1920px) {
 .link {
  font-size:20px
 }
}
.link--is-button {
 cursor:pointer;
 display:inline-block;
 padding:1.5em 2.2em;
 border:0;
 opacity:1;
 font-family:'Clarkson',Helvetica,sans-serif;
 font-style:normal;
 font-weight:500;
 line-height:1em;
 letter-spacing:0;
 text-rendering:geometricPrecision;
 text-transform:uppercase;
 text-decoration:none;
 font-size:12px;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 white-space:nowrap;
 text-align:center;
 -webkit-appearance:none;
 -moz-appearance:none;
 -webkit-transition:opacity 300ms cubic-bezier(.694,0,.335,1),background-color 100ms cubic-bezier(.694,0,.335,1),color 100ms cubic-bezier(.694,0,.335,1);
 -o-transition:opacity 300ms cubic-bezier(.694,0,.335,1),background-color 100ms cubic-bezier(.694,0,.335,1),color 100ms cubic-bezier(.694,0,.335,1);
 transition:opacity 300ms cubic-bezier(.694,0,.335,1),background-color 100ms cubic-bezier(.694,0,.335,1),color 100ms cubic-bezier(.694,0,.335,1)
}
@media all and (min-width:1280px) {
 .link--is-button {
  font-size:13px
 }
}
@media all and (min-width:1440px) {
 .link--is-button {
  font-size:14px
 }
}
@media all and (min-width:1601px) {
 .link--is-button {
  font-size:15px
 }
}
.link--is-button:hover {
 opacity:.8
}
.link--is-button:focus {
 outline:0
}
.link--is-button.button--is-outline {
 -webkit-transition:opacity 300ms cubic-bezier(.694,0,.335,1),background-color 300ms cubic-bezier(.694,0,.335,1),color 300ms cubic-bezier(.694,0,.335,1);
 -o-transition:opacity 300ms cubic-bezier(.694,0,.335,1),background-color 300ms cubic-bezier(.694,0,.335,1),color 300ms cubic-bezier(.694,0,.335,1);
 transition:opacity 300ms cubic-bezier(.694,0,.335,1),background-color 300ms cubic-bezier(.694,0,.335,1),color 300ms cubic-bezier(.694,0,.335,1)
}
.link--is-button.button--is-outline:hover {
 opacity:1
}
.link--is-button.button--has-arrow {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex
}
.link--is-button.button--has-arrow .arrow {
 padding-left:.4em;
 font-size:16px
}
.link--is-lowercase {
 text-transform:lowercase
}
.link--is-small {
 font-family:'Clarkson',Helvetica,sans-serif;
 font-style:normal;
 font-weight:500;
 line-height:1em;
 letter-spacing:0;
 text-rendering:geometricPrecision;
 text-transform:none;
 text-decoration:none;
 font-size:12px;
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale
}
@media all and (min-width:1280px) {
 .link--is-small {
  font-size:13px
 }
}
@media all and (min-width:1440px) {
 .link--is-small {
  font-size:14px
 }
}
@media all and (min-width:1601px) {
 .link--is-small {
  font-size:15px
 }
}
.link--has-anchor-animation .link__text {
 position:relative;
 padding-bottom:1px;
 background-repeat:no-repeat;
 background-image:-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor)),-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor));
 background-image:-o-linear-gradient(currentColor,currentColor),-o-linear-gradient(currentColor,currentColor);
 background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
 background-size:51% 2px,50% 2px;
 background-position:0 100%,100% 100%;
 -webkit-animation:underlineSlideIn .5s cubic-bezier(.694,0,.335,1) forwards;
 animation:underlineSlideIn .5s cubic-bezier(.694,0,.335,1) forwards;
}
.link--has-anchor-animation .link__text aside {
 display:inline-block;
 overflow:hidden;
 position:relative;
 margin-bottom:-.2em
}
.link--has-anchor-animation .link__text aside span {
 padding-left:.2em;
 display:inline-block;
 -webkit-transition:none;
 -o-transition:none;
 transition:none
}
.link--has-anchor-animation .link__text aside span:nth-child(1) {
 position:relative
}
.link--has-anchor-animation .link__text aside span:nth-child(2) {
 position:absolute;
 -webkit-transform:translateX(-150%);
 transform:translateX(-150%);
 padding-right:100%
}
@media (hover:hover) {
 .link--has-anchor-animation .link__text:hover {
  -webkit-animation:underlineSlideOut .5s cubic-bezier(.694,0,.335,1) forwards;
  animation:underlineSlideOut .5s cubic-bezier(.694,0,.335,1) forwards
 }
 .link--has-anchor-animation .link__text:hover aside span {
  -webkit-transition:-webkit-transform .5s cubic-bezier(.694,0,.335,1);
  transition:-webkit-transform .5s cubic-bezier(.694,0,.335,1);
  -o-transition:transform .5s cubic-bezier(.694,0,.335,1);
  transition:transform .5s cubic-bezier(.694,0,.335,1);
  transition:transform .5s cubic-bezier(.694,0,.335,1),-webkit-transform .5s cubic-bezier(.694,0,.335,1);
  -webkit-transition-delay:.3s;
  -o-transition-delay:.3s;
  transition-delay:.3s
 }
 .link--has-anchor-animation .link__text:hover aside span:nth-child(1) {
  -webkit-transform:translateX(200%);
  transform:translateX(200%)
 }
 .link--has-anchor-animation .link__text:hover aside span:nth-child(2) {
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%)
 }
 body.has-reduced-motion .link--has-anchor-animation .link__text:hover {
  -webkit-animation:none;
  animation:none;
  background:0 0
 }
 body.has-reduced-motion .link--has-anchor-animation .link__text:hover aside span {
  -webkit-transition:none;
  -o-transition:none;
  transition:none
 }
}
body.has-reduced-motion .link--has-anchor-animation .link__text {
 -webkit-animation:none;
 animation:none
}
@media all and (min-width:768px) {
 .link--has-anchor-animation.link--is-small .link__text {
  position:relative;
  padding-bottom:2px;
  background-repeat:no-repeat;
  background-image:-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor)),-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor));
  background-image:-o-linear-gradient(currentColor,currentColor),-o-linear-gradient(currentColor,currentColor);
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:51% 2px,50% 2px;
  background-position:0 100%,100% 100%;
  -webkit-animation:underlineSlideIn .5s cubic-bezier(.694,0,.335,1) forwards;
  animation:underlineSlideIn .5s cubic-bezier(.694,0,.335,1) forwards
 }
 .link--has-anchor-animation.link--is-small .link__text aside {
  display:inline-block;
  overflow:hidden;
  position:relative;
  margin-bottom:-.2em
 }
 .link--has-anchor-animation.link--is-small .link__text aside span {
  padding-left:.2em;
  display:inline-block;
  -webkit-transition:none;
  -o-transition:none;
  transition:none
 }
 .link--has-anchor-animation.link--is-small .link__text aside span:nth-child(1) {
  position:relative
 }
 .link--has-anchor-animation.link--is-small .link__text aside span:nth-child(2) {
  position:absolute;
  -webkit-transform:translateX(-150%);
  transform:translateX(-150%);
  padding-right:100%
 }
 body.has-reduced-motion .link--has-anchor-animation.link--is-small .link__text {
  -webkit-animation:none;
  animation:none
 }
}
@media all and (min-width:768px) and (hover:hover) {
 .link--has-anchor-animation.link--is-small .link__text:hover {
  -webkit-animation:underlineSlideOut .5s cubic-bezier(.694,0,.335,1) forwards;
  animation:underlineSlideOut .5s cubic-bezier(.694,0,.335,1) forwards
 }
 .link--has-anchor-animation.link--is-small .link__text:hover aside span {
  -webkit-transition:-webkit-transform .5s cubic-bezier(.694,0,.335,1);
  transition:-webkit-transform .5s cubic-bezier(.694,0,.335,1);
  -o-transition:transform .5s cubic-bezier(.694,0,.335,1);
  transition:transform .5s cubic-bezier(.694,0,.335,1);
  transition:transform .5s cubic-bezier(.694,0,.335,1),-webkit-transform .5s cubic-bezier(.694,0,.335,1);
  -webkit-transition-delay:.3s;
  -o-transition-delay:.3s;
  transition-delay:.3s
 }
 .link--has-anchor-animation.link--is-small .link__text:hover aside span:nth-child(1) {
  -webkit-transform:translateX(200%);
  transform:translateX(200%)
 }
 .link--has-anchor-animation.link--is-small .link__text:hover aside span:nth-child(2) {
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%)
 }
 body.has-reduced-motion .link--has-anchor-animation.link--is-small .link__text:hover {
  -webkit-animation:none;
  animation:none;
  background:0 0
 }
 body.has-reduced-motion .link--has-anchor-animation.link--is-small .link__text:hover aside span {
  -webkit-transition:none;
  -o-transition:none;
  transition:none
 }
}

Build a Website – Website Builder – Squarespace