CSS transition/animation in GTK+. Is it possible?

Question

In the GTK+ documentation you can read that:

CSS defines a mechanism by which changes in CSS property values can be made to take effect gradually, instead of all at once. GTK+ supports these transitions as well.

So I've been trying to run transitions in an application written in GTK since yesterday. Unfortunately, I did not even go one step further, because there is no reasonable example in the documentation. Could someone tell me how to run CSS transitions and animations in GTK application?

EDIT: This is a system problem. I ran a program on openSUSE Leap in a virtual machine and everything works. The question now is why it does not work on openSUSE Tumbleweed? Here are examples I'm trying to run, but without any success.

@keyframes spin {
   to { -gtk-icon-transform: rotate(1turn); }
}

spinner {
   animation-name: spin;
   animation-duration: 1s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;
}

button {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

button:hover {
  width: 300px;
}

here is glade file:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.36.0 -->
<interface>
  <requires lib="gtk+" version="3.22"/>
  <object class="GtkWindow" id="main_window">
    <property name="name">main_window</property>
    <property name="can_focus">False</property>
    <child>
      <object class="GtkFixed" id="fixed">
        <property name="name">fixed</property>
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <child>
          <object class="GtkButton" id="button">
            <property name="label" translatable="yes">button</property>
            <property name="name">button</property>
            <property name="width_request">100</property>
            <property name="height_request">80</property>
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
          </object>
          <packing>
            <property name="x">107</property>
            <property name="y">104</property>
          </packing>
        </child>
        <child>
          <object class="GtkLabel" id="label">
            <property name="name">label</property>
            <property name="width_request">100</property>
            <property name="height_request">80</property>
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">label</property>
          </object>
          <packing>
            <property name="x">107</property>
            <property name="y">17</property>
          </packing>
        </child>
        <child>
          <object class="GtkSpinner" id="spinner">
            <property name="name">spinner</property>
            <property name="width_request">100</property>
            <property name="height_request">80</property>
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="active">True</property>
          </object>
          <packing>
            <property name="x">107</property>
            <property name="y">196</property>
          </packing>
        </child>
      </object>
    </child>
    <child type="titlebar">
      <placeholder/>
    </child>
  </object>
</interface>

and main.c

#include <gtk/gtk.h>
#include <stdlib.h>

GtkBuilder *builder;

// The highest level
GObject *main_window;
GObject *fixed;

// fixed level
GObject *label;
GObject *button;
GObject *spinner;


int main(int argc, char *argv[])
{
   gtk_init(&argc, &argv);
   builder = gtk_builder_new_from_file("../glade.glade");

   main_window = gtk_builder_get_object(builder, "main_window");
   fixed = gtk_builder_get_object(builder, "fixed");
   label = gtk_builder_get_object(builder, "label");
   button = gtk_builder_get_object(builder, "button");
   spinner = gtk_builder_get_object(builder, "spinner");

   // Build signal structure
   gtk_builder_connect_signals(builder, NULL);
   g_signal_connect(main_window, "destroy", G_CALLBACK(gtk_main_quit), NULL);

   // Prepare css file
   GtkCssProvider *provider = gtk_css_provider_new();
   gtk_css_provider_load_from_path(
       provider, "../css.css", NULL);
   gtk_style_context_add_provider_for_screen(
       gdk_display_get_default_screen(gdk_display_get_default()),
       GTK_STYLE_PROVIDER(provider),
       GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

   // Create window
   gtk_widget_show(GTK_WIDGET(main_window));
   gtk_main();

   return (EXIT_SUCCESS);
}

Answer 1

Check your console. When I build and run with these 3 files, I see this:

(a.exe:30940): Gtk-WARNING **: 17:10:50.844: Theme parsing error: test.css:20:7: 'width' is not a valid property name.

You probably wanted min-width. That and the Spinner both animate just fine for me after fixing that by replacing both references to width in the CSS with min-width. I also checked that changing the spin animation duration has effect.