Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                nav
  ul
   li 
    a(href="https://www.lacor.info/film/fuocoammare/samuele.html" target="_top") Accueil
   li 
    a(href="https://www.lacor.info/film/fuocoammare/samuele.html" target="_top")     
   li 
    a(href="https://www.lacor.info/film/fuocoammare/texte/fevrier" target="_top") Le film vu par Vincent Février
   li 
    a(href="https://www.lacor.info/film/fuocoammare/entretien/rosi" target="_top") Entretien avec Gianfranco Rosi
   li 
    a(href="https://www.lacor.info/film/fuocoammare/partenariat/sos_mediterranee" target="_top") Partenariat avec SOS Méditerranée
      
  button.is-closed

  
//<ul> 
//<li>Accueil<a>http://www.lacor.info/film/fuocoammare/index.html</a></li>
    <li>Le film vu par Marie Anne Guerin<a>http://www.lacor.info/film/fuocoammare/texte/guerin/desktop.html</a></li>
    <li>Le film vu par Vincent Février<a>http://www.lacor.info/film/fuocoammare/texte/fevrier/desktop.html</a></li>
    <li>Entretien avec Gianfranco Rosi<a>http://www.lacor.info/film/fuocoammare/entretien/rosi/desktop.html</a></li>
    <li>Partenariat avec SOS Méditerranée<a>http://www.lacor.info/film/fuocoammare/partenariat/sos_mediterranee/desktop.html</a></li>
//</ul>
    
     
article
  h1 Fuocoammare,
  h2 par-delà Lampedusa
  h3 de Gianfranco Rosi
  h3 par Marie Anne Guerin
  p
  p 
    br
    |<i>Fuocoammare</i>, («&#160;le feu à la mer&#160;»), sixième documentaire de Gianfranco Rosi, raconte en profondeur. Il ouvre le récit. Le film met en lumière à l’intérieur de cadres méticuleux et inspirés, un sujet brûlant, souvent mis à la une et sous-traité par les medias&#160;: l’accueil et la perception, ici, depuis l’île de Lampedusa (20&#160;kilomètres carrés, 6.000&#160;habitants), de l’afflux de populations migrantes qui abandonnent leur pays d’Afrique et du Moyen Orient, chassées par la violence des guerres qui déchirent leurs pays, qui ont détruit leur mode de vie, éradiqué leurs traditions, leurs cultures et les besoins vitaux de leurs habitants. On se souvient du 3&#160;octobre&#160;2013, où 366&#160;Erythréens et Somaliens sur 500&#160;embarqués sur un chalut, ont péri incendiés en mer à deux&#160;kilomètres de Lampedusa. On sait que ces peuples composés d’individus arrachés à la distinction de leur pays, et prélevés à leur famille, passent par la Méditerranée, moyennant des sommes énormes, pour rejoindre l’Europe. Une idée incertaine de l’Europe. Ils en sont les fantômes qui viennent à notre rencontre. Ils nous hantent. Ils nous concernent. Soit ils débarquent sur nos côtes, soit les hauts fonds de la Méditerranée sont leur cimetière. Rosi pour qui «&#160;<i>la lumière est un personnage à part entière, complexe et délicat</i>&#160;» filme les Migrants comme des êtres fragilisés dont la lumière a été opacifiée par leurs tragédies individuelles. Cette lumière avait eu lieu, peut-être, dans une autre vie, ailleurs, avant. Le film leur en redonne une part, ici et maintenant. 

  p Pour Rosi, le cinéma commence avec un lieu et ses frontières. Située entre la Sicile, Malte, la Lybie et la Tunisie, au sud des mers Ionnienne et Tyrrhénienne, plus proche de l’Afrique que de l’Europe, de Tripoli que de Palerme, Lampedusa est géographiquement et historiquement un point de passage stratégique des migrants africains venus du Nigéria, du Ghana et du Mali. Depuis 2011, la chute de Kadhafi et le Printemps Arabe ont augmenté de façon exponentielle l'affluence de réfugiés venus de Libye, de Tunisie, du Soudan, d’Erythrée. Rosi met en scène Lampedusa, «&#160;l’île aux lampes&#160;», comme un territoire incarné, sous la forme d’une sentinelle qui guette l’invisible. <i>Fuocoammare</i> enregistre les perceptions de l’île, la personnifie, en fait un territoire de portraits des habitants (les Autochtones) et des étrangers (les Migrants), jamais confrontés les uns aux autres. C’est à la radio que les habitants apprennent les naufrages et les sauvetages en mer. Rosi guette ces êtres de passage sur l’île pour qu’ils passent aussi par les plans de cinéma. La caméra de Rosi (il filme seul, sans équipe) donne une noblesse d’acteur à chacune de ses âmes errantes, les protège en enregistrant leur passage par les plans, en les accompagnant. Elle n’est pas inquisitrice, et ne pose pas de question&#160;: elle regarde et elle écoute. Entre les Autochtones et les Migrants, Rosi filme aussi les instances locales de l’île, parties prenantes d’autres Corps, ceux de l’Armée, de la Police et de la Médecine, qui, dès leur sauvetage, sont leurs premiers interlocuteurs, et s’occupent de «&#160;l’accueil des Migrants&#160;»  —&#160;en l’occurrence, à Lampedusa, (et dans <i>Fuocoammare</i>, c’est le même espace, le film occupe le point de vue de  l’île) le mot accueil prend tout son sens. 

  p Cet accueil, aujourd’hui limité au temps du passage des Migrants qui transitent par l’île est le sujet principal de <i>Fuocoammare</i>. Les rapports entre le temps accidenté des trajets des étrangers, de leur circulation, et l’espace ancestral de Lampedusa forment le cœur du récit, et cette relation est incarnée physiquement par  Pietro, le médecin et directeur de l’hôpital, seul personnage à être en contact avec les Migrants. Les plus belles séquences du film captent cette notion. Notamment ce plan séquence où, au bout d’un quart d’heure, apparaissent pour la première fois les Migrants, et où Rosi filme littéralement l’action de passer d’un espace à un autre. Au contraire des habitants de l’île, les Migrants ne sont pas des personnages. Ils apparaissent et disparaissent, comme des acteurs. On ne sait rien d’eux, on connaît seulement leur destin. Dans cette scène de sauvetage très émouvante, la caméra (le regard du cinéaste) accompagne, en une contre-plongée patiente et animée, l’instant même du passage individuel de chaque Migrant rescapé d’un bateau à l’autre. Ils quittent l’un après l’autre l’embarcation où ils ont été entassés sans être discernés, pour embarquer sur le navire militaire. La place de la caméra permet de saisir l’émotion inquiète des sauveteurs et le regard ouvert sur l’inconnu des étrangers qui n’ont aucune idée du terme de leur lent voyage. L’attention et la douceur du mouvement de caméra est bouleversante aussi parce qu’il renverse en un plan les perceptions habituelles&#160;: les militaires enveloppés dans leur combinaison blanche qui les protège de toute contamination sont totalement anonymes, effacés dans leur individualité et de leur autorité, et ce renversement accentue le contraste avec les visages, les regards, la détresse à nu et la présence unique de chaque Migrant. Dans ce plan Rosi met en scène la solitude immense de chacun. Et l’on voit ce que l’on ne s’attendait pas à voir, les bras ouverts des militaires tendus vers chaque étranger, leurs mains posées sur leurs épaules, l’on entend les quelques mots  prononcés qui tentent d’identifier chaque étranger, et de les réunir. Le premier migrant accueilli est un enfant, un homme en combinaison lunaire  le prend dans ses bras en disant&#160;: «&#160;<i>La mère de la petite est celle qui est descendue en premier&#160;?</i>&#160;» Un autre&#160;: «&#160;<i>C’est le papa&#160;?</i>&#160;» C’est tout à fait extraordinaire. Les plans de <i>Fuocoammare</i> sont des pensées de l’Autre. Ces bribes de questionnement sont plus éloquentes que des informations qui nous seraient assénées pour nous convaincre de leur bon droit. C’est toute la différence entre reportage et documentaire. Un film de cinéma est toujours documentaire. «&#160;<i>Le but de mon film n’est pas d’informer. Nous ne manquons pas de données mais celles-ci écrasent notre perception et nos émotions vis-à-vis du réel</i>&#160;» dit Gianfranco Rosi. Les reportages donnent trop souvent à entendre les voix d’envoyés spéciaux qui recouvrent et obstruent la différenciation des langues des peuples, nous coupent d’eux et ne les distinguent pas&#160;; quand on tombe sur les informations à la télévision c’est insupportable de ne pas, par exemple, voir la différence entre la Lybie, la Syrie, l’Irak ou le Liban. <i>Fuocoammare</i> ne donne à entendre que les voix de ceux qui sont dans les plans, les questions c’est nous, sans autre médiateur que le récit, qu’elles interrogent. Non seulement, comme dit Rosi&#160;: «&#160;<i>Les medias arrivent sur les lieux seulement lorsqu’une tragédie survient et repartent avec des images qui se ressemblent toutes</i>&#160;» mais les caméras de la télévision ne prennent pas le risque du plan fixe, de choisir en la pensant la place de la caméra&#160;; elles mettent davantage en scène la réalité et le jeu de leur propre émotion que la vérité des situations, que leur incarnation. Au cinéma, la vérité va de pair avec l’incarnation. Les Migrants sont dans un dénuement total, leur vie ne tient plus qu’à un fil physique, qu’à la résistance de leur corps. En suivant ce fil narratif de la résistance physique, en grande (contre) partie grâce au personnage de Pietro le médecin, celui qui, par vocation, distingue les corps, <i>Fuocoammare</i> nous informe de l’essentiel. 
  
  p Rosi dit que depuis le naufrage d’octobre 2013, la frontière «&#160;<i>s’est déplacée des côtes de Lampedusa vers la haute mer, avec des navires militaires qui arrêtent les bateaux, transbordent les migrants, les amènent directement au port, d’où ils sont conduits par bus jusqu’à un centre, où ils sont identifiés puis transférés au bout de quelques jours dans d’autres hotspots, en Sicile ou ailleurs en Italie.</i>&#160;» Le film sépare d’un grand vide, d’un gouffre d’invisibilité, ce qui se passe au large des côtes, les vies brûlées en mer, et ce qui se passe dans les villages à terre. Le territoire  d’une île est davantage maritime que terrestre. Quelle que soit la taille de ses terres, ses horizons sont immenses et multipliés par ses orientations. Entre les côtes rocheuses, les habitants&#160;; sur les mers, au large, entassés dans des embarcations vétustes, les étrangers. 


  p Le récit de <i>Fuocoammare</i> est initié par Samuele, un enfant du pays qui se révèle être un acteur exceptionnel et un personnage central, et se prolonge dans le sillage de ce garçon d’une dizaine d’années qui, tout au long du film, est assiégé. Il est envahi et poursuit des ennemis invisibles&#160;: ses angoisses, un rossignol caché dans la nuit, à l’abri des feuillages, son avenir de pêcheur en pleine mer, l’horizon, bref ce qu’il ne peut pas voir. Avec un camarade, il ne cesse de les combattre ces ennemis invisibles, mimant des tirs à la mitraillette vers le large depuis les falaises de l’île, transformant des cactus en cibles à visage humain, fabriquant des lance-pierre pour tenter (en vain) de faire taire le rossignol. Ce combat constant et la charge émotionnelle l’amènent à somatiser. On le voit consulter à deux reprises. L’ophtalmologiste invisible (si je me souviens bien on entend juste sa voix), diagnostique l’œil gauche de Samuele comme paresseux, et lui fait porter un bandeau sur le droit pour que le gauche se mette enfin à travailler. Souffrant d’oppressions respiratoires, il consulte Pietro qui l’examine et pose un diagnostic d’angoisse. Samuele entraîne le cinéaste sur le terrain de ses imaginations et de ses inquiétudes d’enfant, par des chemins qu’il n’aurait pas pu imaginer sans lui. 

  p En mettant en scène les habitants de Lampedusa qui côtoient ce qu’ils ne voient pas, Rosi fait précisément ce que Alfred Hitchcock conseillait de faire aux monteurs de <i>Memory of Camps</i>, le film de Sydney Bernstein, lors de la libération du camp de Bergen-Belsen. En 1945, Bernstein, alors conseiller du Ministère de l’Information, voulait réaliser un film sur les camps construits par les nazis dans le but pédagogique d’en montrer les images en Allemagne. Il demanda à son vieil ami Alfred Hitchcock de le conseiller pour le tournage et surtout de l’aider à monter ce film qui servirait de preuve de ce qui s’était réellement passé. Hitchcock préconisa de filmer en plans séquence, sans coupe, pour contrer toute suspicion négationniste. Quand Hitchcock, revenu spécialement de Hollywood, visionna les rushes, il fut si bouleversé qu’il quitta le studio pendant plusieurs jours. Puis demanda aux opérateurs de retourner filmer des contrepoints sur la vie des villages dans la campagne environnante pour voir comment elle était habitée. Sa méfiance vis-à-vis de plans trop découpés était justifiée quand on sait que même <i>Nuit et Brouillard</i>, film essentiel et de référence, manipule les images, je cite Laura Laufer&#160;: «&#160;<i>cette photo donnée comme image de la rafle du Vel d’Hiv en 1942, alors qu’il s’agit d’une photo de collaborateurs qui y sont retenus après guerre, mais Resnais l’ignorait. Autre image reprise de <span style="font-style:normal">Memory of Camps</span>, où on voit un bulldozer charriant des cadavres et montrée par Resnais comme symbole de la barbarie nazie, alors qu’il s’agit ici d’une opération d’hygiène, de nettoyage du camp effectué après sa libération.</i>&#160;» (cf. Sylvie Lindeperg, <i>Nuit et brouillard</i> un film dans l’Histoire, Ed. Odile Jacob). Fin de la parenthèse.

  p Rosi met en scène quelques membres de la famille de Samuele, son père pêcheur, sa grand-mère, femme au foyer qui écoute la radio, le programmateur de la radio locale qui rappelle que <i>Fuocoammare</i> est le titre d’une chanson populaire qui évoque le bombardement d’un navire italien incendié par les avions de la R.A.F. pendant la seconde guerre mondiale. Du côté maritime, on voit  un pêcheur qui va plonger et explorer les fonds sous-marins environnant l’île, là où l’on s’attend au pire,  à voir tournoyer des cadavres de Migrants.  Ce qui heureusement n’arrive pas. Le cœur du récit est incarné par les sensibilités du petit «&#160;malade&#160;» qui ne voit pas, et du médecin, Pietro, qui est chargé de superviser les soins médicaux d’urgence à fournir aux réfugiés qui débarquent, et qui, je le répète, est le seul autochtone à rencontrer en chair et en os à la fois les Migrants et les habitants. 

  p Toutefois la narration de <i>Fuocoammare</i> s’articule autour de l’idée majeure d’une multiplicité de récits épiques produits par l’exil clandestin de ces peuples migrants. Après la consultation de Samuele où l’ophtalmologiste découvre la paresse de son œil gauche, cinquante minutes après le début du film, juste après des séquences protocolaires avec la police, où chaque étranger fouillé puis  photographié, est protégé par la douceur et l’attention de Rosi, il y a un plan large de nuit sur les lumières de la côte, suivi d’un plan en plongée oblique qui nous  montre les Migrants agenouillés pour la prière, entre chien et loup, dans une cour, et on entend enfin leurs voix mêlées. Le fait qu’on leur ait procuré les mêmes couvertures écossaises, les mêmes mules, n’a plus d’importance, ils se sont reconnus et retrouvés, ils ont survécu, ils prient ensemble. C’est à ce moment que l’un des migrants nigériens, assis parmi les autres, prend la parole, et raconte leur épopée depuis leur pays jusqu’en Lybie. Le récit énoncé à voix forte est fabuleux, épique et tragique. L’homme commence par&#160;: «&#160;<i>Ceci est mon témoignage, nous ne pouvions plus rester au Nigeria, beaucoup mouraient dans les bombardements…</i>&#160;» Il est accompagné par le chœur des autres qui chantent. Dans le Sahara les gens étaient tués et violés&#160;: «&#160;<i>Personne ne pouvait nous cacher, les montagnes ne pouvaient pas nous cacher, nous avons fui vers la mer, tant de passagers sont morts, engloutis par la mer, sur quatre-vingt dix, seuls trente sont rescapés… Nous ne sommes pas morts dans les prisons lybiennes, Dieu nous sauvés, nous ne sommes pas morts…</i>&#160;» Ces épopées de l’arrachement consistent en départs, en dérives, en errances, en séjours, en incarcérations, en évasions, en sauvetages où ce qui compte le plus, outre les rencontres, c’est de rester ensemble. 

  p <i>Fuocoammare</i> est le résultat d’un long travail d’approche du cinéaste qui a séjourné plusieurs mois à Lampedusa avant de commencer à filmer, pour rencontrer les instances de l’île et les personnages de son film. Puis trois semaines à bord d’un vaisseau militaire, lui ont permis de filmer «&#160;une soixantaine d’opérations de sauvetage en mer&#160;». Il y a un plan de nuit sur l’arrivée du bus qui transfère les Migrants du port vers les formalités policières et leur résidence en transit, il s’appelle MISERICORDIE, cela ne s’invente pas. La seule chose inventée par  Rosi, c’est le découpage, en plans séquences, ou pas, toujours extrêmement attentif, à la recherche de la bonne distance. Il nous donne accès à des récits circonstanciés, même si peu bavards, tellement précieux, de la vie de personnes et de familles qui se retrouvent sans rien, et finissent, pour ceux qui auront résisté à l’inhumanité du voyage, par accoster, poches et mains vides, mais parfois ensemble, en terre inconnue. Chez nous.
  
  p#sign 
   br
   | Marie Anne Guerin, le 17 juillet 2016
  
  p#bio 
   br
   | Marie Anne Guerin est critique de cinéma.
   br  
   | <a href="#" target="_new">Voir la notice biographique de Marie Anne Guerin</a>.
              
            
!

CSS

              
                @import 'css/reset.css'; 
@import 'https://fonts.googleapis.com/css?family=PT+Sans+Narrow';;
$font: 'PT sans narrow',
sans-serif;
$button:hsla(256, 100%, 64%, 1);
$bg: hsl(162, 83%, 87%);
$menu: hsl(180, 100%, 78%);
$shadow: hsla(162, 73%, 57%, .7);
$text: hsla(256, 100%, 34%, .6);
$scroll--2:hsla(222, 68%, 15%,0.7);
$scroll--1:hsla(165, 80%, 36%,0.5);
$over: hsla(256, 100%, 14%, .8);
$overlay: hsl(256, 100%, 90%);
$color-body: $text;
$bg-body: $bg;
$bg-menu: $text;
$padding: 24px;
* {
  box-sizing: border-box;
}

body {
  font-family: $font;
  color: $color-body;
  text-shadow: 1px 1px 1px $shadow;
  background-image: linear-gradient(10deg, darken(navy, 7) 15%, darken(navy, 2) 25%, cyan, $bg,  mistyrose);
  text-align: justify;
  &.is-open {
    overflow: hidden;
  }
}

body::-webkit-scrollbar {
  width: 8px;
}
body.thin::-webkit-scrollbar {
  width: 2px;
}
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: $scroll--1;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: $scroll--2;
}
::-webkit-scrollbar-thumb:window-inactive {
  background: $scroll--2;
}
::-webkit-scrollbar-track-piece:start {
  background: $scroll--1;
}
::-webkit-scrollbar-track-piece:start:window-inactive {
  background: $scroll--2;
}
::-webkit-scrollbar-track-piece:end {
  background: $scroll--1;
}
::-webkit-scrollbar-track-piece:end:window-inactive {
  background: $scroll--1;
}

h1,
h2,
h3 {
  margin-bottom: .5em;
  line-height: 1.1;
  text-align: center;
}

h1 {
  font-size: 6vh;
}

h2 {
  font-size: 4vh;
}

h3 {
  font-size: 2.5vh;
}

p {
  font-size: 2.7vh;
  line-height: 1.8;
  margin-bottom: 24px;
  font-weight: 200;
}

article {
  margin: auto;
  padding: 100px $padding;
  width: 100%;
  max-width: 92vh;
  transition: transform 0s ease-out;
  z-index: 2;
  mix-blend-mode:lighter;
  .is-open & {
    opacity: 0;
    transform: scale(0.1) translateY(-50%) rotate(25deg);
    transition: opacity 6s ease-out, transform 10s ease-in;
  }
}

i {
  font-style: italic;
}

a {
  text-decoration: none;
  color:  $bg-menu;
}


#bio {
  font-size: 2vh;
  width:50%;
  margin-left:50%;
}
#sign{
  text-align:right;
}

nav {
  position: fixed;
  padding: 24px;
  width: 100%;
  height: 0;
  transform: translateZ(10deg);
  transition: background-color .4s ease-out, height 0s .4s;
  .is-open & {
    height: 100%;
    background-color: $over;
    transition: background-color 2s ease-out;
    z-index: 4;
  }
}

ul {
  position: absolute;
  top: $padding;
  left: $padding;
  font-size: 30px;
  text-shadow: 1px 1px 1px rgba(white, .5);
  color: $bg-menu;
  transform-origin: 0 0;
  transform: scale(0.1);
  transition: transform .4s ease-out;
  z-index: 2;
 
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  li {
    display: none;
    clear: both;
    float: left;
    margin: 0 0 48px;
    padding: 0 60px;
    background-color: $bg-menu;
    cursor: pointer;
    user-select: none;
    transition: background-color 0s .2s ease-out, margin .2s ease-out, padding .2s ease-out, opacity .2s ease-out;
    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 0;
      width: 0;
      filter: blur(8px) hue-rotate(50deg);
      background-color: darken($menu, 20%);
      transition: width 2s ease-out, height 2s ease-in, filter 2s linear;
    }
    &:nth-child(n+3) {
      display: block;
    }
    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        animation: bounce-out .2s ease-out;
      }
    }
    &:hover {
      color: darken($menu, 20%);
      &:after {
        width: 100%;
        height: 2px;
        filter: blur(0px) hue-rotate(0deg);
      }
    }
  }
  .is-open & {
    transform: translateY($padding + 6px) scale(1);
    li {
      display: block;
      padding: 12px 0;
      margin: 0;
      background-color: transparent;
      transform: scale(0.6);
      transition: background-color 0s ease-out, margin .2s ease-out, padding .2s ease-out, opacity .2s ease-out;
      @for $i from 1 through 5 {
        &:nth-child(#{$i}) {
          animation: bounce-in 4s $i * .07s cubic-bezier(.1, floor(.1), .00001, abs(-.15)) infinite;
        }
      }
    }
  }
}

button {
  position: absolute;
  top: $padding;
  left: $padding;
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease-out;
  z-index: 3;
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 3px;
    height: 100%;
    background-color: $button;
  }
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
  .is-open & {
    opacity: 1;
    transform: rotate(360deg);
    transition: opacity .2s .1s ease-out, transform .4s .1s ease-out;
  }
}

@keyframes bounce-in {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.08);
    filter: blur(1px)
  }
  40% {
    transform: scale(0.9);
    filter: hue-rotate(350deg)
  }
  60% {
    transform: scale(1.05);
    filter: brightness(1.1)
  }
  80% {
    transform: scale(0.92);
    filter: blur(1px)
  }
  100% {
    transform: scale(.99);
  }
}
              
            
!

JS

              
                var bod = $('body');
var tog = $('button');

tog.on("click", function() {
  $(this).toggleClass('is-closed');
  if(!$(this).hasClass('is-closed')) {
      bod.addClass('is-open');
  } else {
      bod.removeClass('is-open');
  }
});
              
            
!
999px

Console