{"id":533,"date":"2026-06-15T19:58:13","date_gmt":"2026-06-15T12:58:13","guid":{"rendered":"https:\/\/www.bisasoftware.id\/2026\/?p=533"},"modified":"2026-06-15T19:58:13","modified_gmt":"2026-06-15T12:58:13","slug":"bab-16-animation-project","status":"publish","type":"post","link":"https:\/\/www.bisasoftware.id\/2026\/bab-16-animation-project\/","title":{"rendered":"BAB 16 – ANIMATION & PROJECT"},"content":{"rendered":"\n

ANIMATION<\/h1>\n\n\n\n

CSS dapat membuat animasi tanpa JavaScript.<\/p>\n\n\n\n

\n\n\n\n

Contoh<\/h2>\n\n\n\n
@keyframes bergerak{

    from{
        left:0;
    }

    to{
        left:300px;
    }

}<\/code><\/pre>\n\n\n\n
.box{
    animation:bergerak 3s infinite;
}<\/code><\/pre>\n\n\n\n
\n\n\n\n
Praktik<\/h1>\n\n\n\n
Membuat tombol berkedip.<\/p>\n\n\n\n
@keyframes kedip{

    0%{
        opacity:1;
    }

    50%{
        opacity:0.5;
    }

    100%{
        opacity:1;
    }

}<\/code><\/pre>\n\n\n\n
button{
    animation:kedip 2s infinite;
}<\/code><\/pre>\n\n\n\n
\n\n\n\n
PROYEK AKHIR<\/h1>\n\n\n\n
WEBSITE PROFIL SEKOLAH<\/h1>\n\n\n\n
Halaman yang Dibuat<\/h2>\n\n\n\n
1. Beranda<\/h3>\n\n\n\n
Berisi:<\/p>\n\n\n\n
    \n
  • Logo sekolah<\/li>\n\n\n\n
  • Banner<\/li>\n\n\n\n
  • Sambutan<\/li>\n<\/ul>\n\n\n\n
    \n\n\n\n
    2. Profil<\/h3>\n\n\n\n
    Berisi:<\/p>\n\n\n\n
      \n
    • Sejarah sekolah<\/li>\n\n\n\n
    • Visi dan misi<\/li>\n<\/ul>\n\n\n\n
      \n\n\n\n
      3. Jurusan<\/h3>\n\n\n\n
      Menampilkan:<\/p>\n\n\n\n
        \n
      • RPL<\/li>\n\n\n\n
      • TKJ<\/li>\n\n\n\n
      • DKV<\/li>\n\n\n\n
      • AKL<\/li>\n<\/ul>\n\n\n\n
        Menggunakan CSS Grid.<\/p>\n\n\n\n
        \n\n\n\n
        4. Galeri<\/h3>\n\n\n\n
        Menampilkan foto kegiatan sekolah.<\/p>\n\n\n\n
        Menggunakan Grid.<\/p>\n\n\n\n
        \n\n\n\n
        5. Kontak<\/h3>\n\n\n\n
        Berisi:<\/p>\n\n\n\n
          \n
        • Alamat<\/li>\n\n\n\n
        • Telepon<\/li>\n\n\n\n
        • Email<\/li>\n<\/ul>\n\n\n\n
          \n\n\n\n
          PROYEK AKHIR LANJUTAN<\/h1>\n\n\n\n
          LANDING PAGE BISNIS UMKM<\/h1>\n\n\n\n
          Fitur:<\/p>\n\n\n\n
            \n
          1. Navbar Flexbox<\/li>\n\n\n\n
          2. Hero Section<\/li>\n\n\n\n
          3. Produk Grid<\/li>\n\n\n\n
          4. Tombol WhatsApp<\/li>\n\n\n\n
          5. Responsive Mobile<\/li>\n\n\n\n
          6. Hover Effect<\/li>\n\n\n\n
          7. Animasi Tombol<\/li>\n<\/ol>\n\n\n\n
            \n\n\n\n
            UJI KOMPETENSI SISWA<\/h1>\n\n\n\n
            Pilihan Praktik<\/h2>\n\n\n\n
            Paket A<\/h3>\n\n\n\n
            Buat Website Profil Pribadi<\/p>\n\n\n\n
            Kriteria:<\/p>\n\n\n\n
            \u2713 Responsive
            \u2713 Flexbox
            \u2713 Grid
            \u2713 Hover Effect<\/p>\n\n\n\n
            \n\n\n\n
            Paket B<\/h3>\n\n\n\n
            Buat Website Toko Online Sederhana<\/p>\n\n\n\n
            Kriteria:<\/p>\n\n\n\n
            \u2713 Navbar
            \u2713 Katalog Produk
            \u2713 Responsive
            \u2713 Animasi<\/p>\n\n\n\n
            \n\n\n\n
            Paket C<\/h3>\n\n\n\n
            Buat Website Sekolah<\/p>\n\n\n\n
            Kriteria:<\/p>\n\n\n\n
            \u2713 Menu Navigasi
            \u2713 Profil
            \u2713 Galeri
            \u2713 Kontak
            \u2713 Responsive<\/p>\n\n\n\n
            <\/p>\n","protected":false},"excerpt":{"rendered":"
            ANIMATION CSS dapat membuat animasi tanpa JavaScript. Contoh Praktik Membuat tombol berkedip. PROYEK AKHIR WEBSITE PROFIL SEKOLAH Halaman yang Dibuat…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[15],"tags":[33],"class_list":["post-533","post","type-post","status-publish","format-standard","hentry","category-tutorial-css","tag-tutorial-css"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=533"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/533\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/533\/revisions\/534"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=533"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=533"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}