href-link 上的纯 CSS 动画（点击）答案

【问题标题】：Pure CSS-animation on href-link (click)href-link 上的纯 CSS 动画（点击）
【发布时间】：2021-08-26 16:41:32
【问题描述】：

我的动画 (fadin) 有问题。目标应该是只有在我点击菜单中的“ccc”时才会触发动画。

目前动画在我重新加载页面时开始。我尝试过“目标”、“焦点”等。我无法看到解决方案。

另一个问题：我可以在没有关键帧的情况下创建效果吗？我尝试了过渡/不透明度。没有成功。有人有想法吗？

我正在寻找一个纯 CSS 解决方案。

谢谢

:root {
    --colorPrimary: #A2C7E2;
    --colorSecondary: #fff;
    --colorHover: #104068;
    --colorHoverBG: #7398C5;
    --colorParagraph: #8b8b8b;
}
body,html{
    height: 100vh;
}

body{
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "header"
        "main"
        "footer";
}

header{
    grid-area: header;
    background-color: #545658;
}

main{
    grid-area: main;
    overflow: hidden;
}

nav{
    grid-area: footer;
    background-color: #acb0b4;
}

nav ul {
    list-style: none;
    display:grid;
    grid-template-columns: repeat(4,auto);
    padding: 0px;
    justify-items: center;
}

ul li a {
    color: #fff;
    text-decoration: none;
}

nav a:hover { background: #691717; }
/* PLACEHOLDER ICONS */

/* nav i {
  text-decoration: none;
  font-style: normal;
} */


.a,
.b,
.c,
.d{
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4,auto);
    grid-template-rows: repeat(4,auto);
}

.b,
.d{
    background-color: var(--colorSecondary);
}

.a,
.c{
    background-color: var(--colorPrimary);
}


main section{
    -webkit-transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
}

.c{
    grid-gap:1rem;
    grid-template-areas: 
        "box1 box1 box1 box1"
        "box2 box2 box3 box3"
        "box4 box4 box3 box3"
        "box4 box4 box5 box5";
}

.c .grid-box{
    background: #ff6e48;
    transition: all 250ms;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    animation: fadein 1s ease-out normal backwards;
  
 
  
}



.c .grid-box:hover{
    z-index: 2;
    position: relative;
    box-shadow: 0 1.5rem 2.8rem rgba(0, 0, 0, 0.15),
    0 1rem 1rem rgba(0, 0, 0, 0.15);
    transform: translate(0, -0.5rem) scale(1.01); 
}



.c .element1{
    grid-area: box1;
    animation-delay: 0;
}

.c .element2{
    grid-area: box2;
    animation-delay: 100ms;
}

.c .element3{
    grid-area: box3;
    animation-delay: 200ms;
}

.c .element4{
    grid-area: box4;
    animation-delay: 300ms;
}

.c .element5{
    grid-area: box5;
    animation-delay: 400ms;
}


@keyframes fadein {
    0% {
      transform: scale(0);
    }
    70% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }


 



a[ id= "A" ]:target ~ main section {
    -webkit-transform: translateY( 0vh);
    transform: translateY( 0vh );
}

a[ id= "B" ]:target ~ main section {
    -webkit-transform: translateY( -100vh );
    transform: translateY( -100vh );
}
a[ id= "C" ]:target ~ main section {
    -webkit-transform: translateY( -200vh );
    transform: translateY( -200vh );
    
}

a[ id= "D" ]:target ~ main section {
    -webkit-transform: translateY( -300vh );
    transform: translateY( -300vh );
}

<body>
 <a id="A"></a>
 <a id="B"></a>
 <a id="C"></a>
 <a id="D"></a>

      <header></header>

      <nav>
        <!-- <div class="navigation"> -->
          <ul>
            <li><a href="#A">aaa</a></li>
            <li><a href="#B">bbb</a></li>
            <li><a href="#C">ccc</a></li>
            <li><a href="#D">ddd</a></li>
          </ul>
        <!-- </div> -->
      </nav>

      <main>
        <section class="a"id="A"></section>
        <section class="b"id="B"></section>
        <section class="c"id="C">
          <div class="element1 grid-box">1</div>
          <div class="element2 grid-box">2</div>
          <div class="element3 grid-box">3</div>
          <div class="element4 grid-box">4</div>
          <div class="element5 grid-box">5</div>
        </section>
        <section class="d"id="D"></section>
      </main>
 </body>
</html>

【问题讨论】：

“当前动画在我重新加载页面时开始” - 当然可以，因为您将其应用于元素而没有任何进一步的“条件”。 " 尝试过 "target"、"focus" 等" - 目标伪类将是此处的方法 - 但您需要将其应用于正确的元素。当您单击该链接时，#C 将显示在地址栏中，并将定位 ID 为 C 的元素。
并且 ID 必须在 HTML 文档中是唯一的，因此首先要删除您当前存在的重复项。

标签： html css css-animations

【解决方案1】：

我已经从根本上简化了您上面的设置（出于演示目的），但这里有一个简单的 CSS-only 示例，它结合了：

CSS 过渡（即，而不是 @keyframes）
使用:target 伪选择器来激活transition

工作示例：

main {
 position: relative;
 float: right;
 width: 50%;
}

section {
  position: absolute;
  top: 2px;
  left: 0;
}

section p {
  margin: 0;
  opacity: 0;
  transition: all 0.6s ease-out;
}

section:target p {
  opacity: 1;
}

<main>
<section id="a"><p>Section A targeted</p></section>
<section id="b"><p>Section B targeted</p></section>
<section id="c"><p>Section C targeted</p></section>
<section id="d"><p>Section D targeted</p></section>
</main>

<nav>
<ul>
<li><a href="#a">Target Section A</a></li>
<li><a href="#b">Target Section B</a></li>
<li><a href="#c">Target Section C</a></li>
<li><a href="#d">Target Section D</a></li>
</ul>
</nav>

【讨论】：