Creating Page Transitions

The CMS Questions
1

I’ve been scouring looking for some help with creating page transitions for my Kirby site.
Currently I’m using smoothstate.js and css/keyframes. The general issue I’m having is that it works on some pages but not others.

I’m using this guide for page transitions if it helps: How To Add Page Transitions With CSS And SmoothState.js | CSS-Tricks

For example, it doesn’t work on this template I have:
Search.PHP
(The transition classes are tied to the SECTION tag as “m-header scene)element scene_element–fadein”)

<?php snippet('header') ?>
<main class='main searchpage' role="main">
<section class=" wrap m-header scene_element scene_element--fadein">
<form>
  <input type="search" class="searchbar" name="q" value="Search..." onfocus="if (this.value=='Search...') this.value='';">
</form>

<?php if(get('q')): ?>
  <?php if($results->count()) : ?>
    <ul class="searchresults ">
      <?php foreach($results as $result): ?>
        <li>
          <a href="<?php echo $result->url() ?>">
           <?php echo $result->title()->html() ?>
          </a>
        </li>
      <?php endforeach ?>
    </ul>
  <?php else : ?>
    <p>Sorry! Couldn't find anything with that search! </p>
  <?php endif ?>
<?php endif ?>
</section>
</main>
<?php snippet('footer') ?>

Page Transitions CSS:

.m-scene .scene_element {
  -webkit-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.m-scene .scene_element--fadein {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

}

Keyframe.Css

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }
2

The problem is your CSS. The above means: Select all elements with a classname of scene-element that are descendants of an element with a classname m-scene. In your case above, however, you have given both classnames to the same element. So you either have to remove the space between those two selectors, or put the m-scene classname on the parent element like in the documentation. Same for .m-scene .scene_element--fadein. This has nothing whatsoever to do with Kirby.